CODEWITHSUNDEEP
javascriptextjssencha-touch
Malay Dave
Malay Dave

Reputation: 115

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.

Upvotes: 1

Views: 502

Answers (3)

Malay Dave
Malay Dave

Reputation: 115

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

Upvotes: 1

Ankit Chaudhary
Ankit Chaudhary

Reputation: 4099

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>

Upvotes: 2

And-y
And-y

Reputation: 1524

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);

Upvotes: 2

Related Questions