Search code examples
javascriptextjssencha-touch

How to use keydown event in Ext.Message.Box


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.


Solution

  • 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;
            }
        };