In extjs4 how to set focus of textfield - extjs4

Question

I am working in extjs4. i have activation view form as-
For entering key i have taken item as-
{
margin:'5 5 5 5',
xtype: 'fieldcontainer',
fieldLabel: 'Enter key',
layout: 'hbox',
combineErrors: true,
defaults: {
hideLabel: true
},
items: [{xtype: 'textfield', fieldLabel: 'a', name: 'a', width: 80, allowBlank:false, margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'b', name: 'b', width: 80, allowBlank: false, margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'c', name: 'c', width: 80, allowBlank: false, margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'd', name: 'd', width: 80, allowBlank: false, margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'e', name: 'e', width: 80, allowBlank: false, margins: '0 5 0 0'}]},
I want to restrict number of characters in each block to 5. And after entering 5 char in first block,i want to set focus to next block automatically. So how to implement this in extjs4

Answer 1

You can add key listeners. You will have configure your textfield something like this:
{
xtype: 'textfield',
//...other props...
name: 'a',
maxLength: 5,
enableKeyEvents: true,
enforceMaxLength: true,
listeners: {
keyup: function(f, e) {
if (f.getValue().length == 5)
{
var nextField = f.next();
if (nextField && Ext.isFunction(nextField.focus)) {
nextField.focus();
}
}
}
}
}
You could even enableKeyEvents, maxLength, enforceMaxLength, and the listeners to your defaults, if they are the same for all the fields.