Limiting Number of ( inputable ) characters in ExtJS Textfield

While designing UI's/User Screens and coding them in ExtJS (version less than Ext 4), we need certain TextFields which will allow only limited no of characters to be inputted, while others user can input any number of characters but user will be shown invalid-text saying only 'x' number of characters are allowed.

Actually initially I wanted this limited input textfield in ExtJS, so one of my friend told me this.(as its easily possible with input text tag in normal HTML).

In order to make any ExtJS Textfield with limited number of characters, use autoCreate config property and create text-input HTML tag.

Here is example -

Ext.onReady(function(){
  
    Ext.QuickTips.init();
    //Turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'under';
 
    var fp = new Ext.FormPanel({
        frame: true,
        title:'TextField Examples',
        labelWidth : 150,
        width: 600,
        labelSeperator : '',
        renderTo:document.body,
        bodyStyle: 'padding:0 10px 0;',
        id : 'textFieldFormPanel',
        items: [{
            anchor : '95%',
            labelWidth : 150,
            labelAlign : 'left',
            labelSeparator : "",
            fieldLabel:'TextField',
            id: 'textfield1'
            ,xtype : 'textfield',            
            maxLength : 20, //20 chars max is valid, 
            //but user still can input more chars and shown invalid text.            
            allowBlank:false        
        },{
         anchor : '95%',
            labelWidth : 150,
         xtype : 'textfield',
         fieldLabel : 'Textfield 
(Max 20 Characters)',
            labelAlign : 'left',
            labelSeparator : "",
         id: 'textfield2',                
         autoCreate :  { //restricts user to 20 chars max, cannot enter 21st char
             tag: "input", 
             maxlength : 20, 
             type: "text", 
             size: "20", 
             autocomplete: "off"},                
         allowBlank:false
        }]
    });
    fp.show();
});

Here is how it would look like - 

So in the second Textfield user can input max 20 characters and 21st character isn't allowed. And whereas in first one its allowed but invalid text is shown.




Update :- Since Ext 4, Sencha people have provided explicit property for above functionality,
enforceMaxLength : Boolean
True to set the maxLength property on the underlying input field. Defaults to false.



enjoy:-)