How to use keydown event in Ext.Message.Box

Question

I want to add keydown event that fired when i press more than 250 character. here is the code,

var c = Ext.MessageBox.show({
    title: "Version Remarks",
    id:'test',
    inputType: "textareafield",
    msg:"Please Enter Version Remarks: (Only 250 Character)",
    width: 375,
    buttons: Ext.MessageBox.OKCANCEL,
    multiline: true,
    label: Ext.MessageBox.label,
    fn: b,
    icon: Ext.MessageBox.INFO,
    modal: true,
    closable: false,
    allowBlank: false,

});

c.textArea.on('change', function (e, text, o) {

    if (text.length > 250) {
        c.msgButtons.ok.setDisabled(true);
        //c.label.setText("This is the label");
        alert("You are not able to enter more than 250 Character.!!")
    } else {
        c.msgButtons.ok.setDisabled(false);
    }
}

when i pressed 251 character the popup was display and also allow me to enter the character but now i want to use onkeydown event which not allow the user to enter any character more than 250 character.

Do you want to notify user or just not allow him to enter? – Ankit Chaudhary Feb 03 '17 at 10:35 — Ankit Chaudhary, Feb 03 '17 at 10:35
i want to notify the user. – Malay Dave Feb 03 '17 at 11:40 — Malay Dave, Feb 03 '17 at 11:40

score 2 · Answer 1 · answered Feb 03 '17 at 10:42

Use the maxLength config of the textbox and call setMaxLength to set it to 250 characters.
From the sencha documentation.

The maximum number of permitted input characters.

So your code would look like:

var c = Ext.MessageBox.show({
     // your config
});
c.textArea.setMaxLength(250);

Ankit Chaudhary · Answer 2 · 2017-02-03T12:19:07.973

If you don't want the user to notify that maximum limit of characters is reached & not allow him to enter more charcters then you can use maxLength attribute of textarea element(html not extjs) to set the maxlength.

c.textArea.el.dom.querySelector('textarea').maxLength=250;

To Notify user we need to use keypress event to check the length of the text and notify user if length exceeds 250.

Working Example

Ext.application({
    launch : function() {
var c = Ext.MessageBox.show({
    title: "Version Remarks",
    id:'test',
    inputType: "textareafield",
    msg:"Please Enter Version Remarks: (Only 250 Character)",
    width: 375,
    buttons: Ext.MessageBox.OKCANCEL,
    multiline: true,
    label: Ext.MessageBox.label,
    icon: Ext.MessageBox.INFO,
    modal: true,
    closable: false,
    allowBlank: false,

});
c.textArea.el.dom.querySelector('textarea').maxLength=250;
c.textArea.el.dom.querySelector('textarea').onkeypress=function(){
if(this.value.length==250){
 alert("You are not able to enter more than 250 Character.!!");
 return false;
}  };

}


});

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>

ok its worked thanks but i need to notify the user that your try to enter character more than 250 and when user click on ok button of alert then after user not able to type any thing in textarea. Right now the thing is that popup was display after enter 250 character but i click on ok button of popup then if i type any character than it was also display and then again popup was fired so i want to restrict user to type after 250 character. i hope you understand. — Malay Dave, Feb 03 '17 at 11:47
For that we will use key press event to check the length and restrict and notify user . see my updated answer — Ankit Chaudhary, Feb 03 '17 at 12:24

score 1 · Accepted Answer · answered Feb 06 '17 at 11:16

I tried this and it's also worked.

var c = Ext.MessageBox.show({
        title: "Version Remarks",
        id: 'test',
        inputType: "textareafield",
        msg: "Please Enter Version Remarks: (Only 250 Character)",
        width: 375,
        buttons: Ext.MessageBox.OKCANCEL,
        multiline: true,
        label: Ext.MessageBox.label,
        fn: b,
        icon: Ext.MessageBox.INFO,
        modal: true,
        closable: false,
        allowBlank: false,

    });

    c.textField.maxLength = 250;
    c.textArea.el.dom.querySelector('textarea').onkeyup = function () {
        if (this.value.length > 250) {
            this.value = this.value.substr(0, 250);
            alert("Maximum 250 characters are allowed for version remark.");
            return false;
        }
    };

How to use keydown event in Ext.Message.Box

3 Answers3