ExtJS Multipart textfield in a single row - extjs4

Question

How can I create this type of From using ExtJS 4.

Answer 1

Yes I did Solved it using Ext.form.FieldSet.
Ext.create('Ext.form.FieldSet', {
title: 'Deposit A/C No',
defaults: {
labelWidth: 89,
layout: {
type: 'hbox',
defaultMargins: {top: 0, right: 5, bottom: 0, left: 0}
}
},
items: [
{
xtype: 'fieldcontainer',
combineErrors: true,
msgTarget: 'side',
defaults: {
hideLabel: true
},
items: [
{
xtype: 'textfield',
width: 15,
name: 'part1',
value: '2',
maskRe: /[0-9.]/,
readOnly: true
},
{xtype: 'displayfield', value: '-'},
{
xtype: 'textfield',
width: 30,
name: 'part2',
value: '050',
maskRe: /[0-9.]/,
readOnly: true
},
{xtype: 'displayfield', value: '-'},
{
xtype: 'textfield',
width: 30,
name: 'part3',
value: '213',
maskRe: /[0-9.]/,
maxLength: 3,
enforceMaxLength: 3,
keyup: function () {
var part4 = this.getValue();
if (part4.length >= 3) {
var form = this.up('form').getForm();
form.findField("part4").focus();
}
}
},
{xtype: 'displayfield', value: '-'}, {
xtype: 'textfield',
width: 30,
name: 'part4',
maskRe: /[0-9.]/,
enableKeyEvents: true,
maxLength: 2,
enforceMaxLength: 2,
listeners: {
afterrender: function (field) {
field.focus();
},
keyup: function () {
var part4 = this.getValue();
if (part4.length >= 2) {
var form = this.up('form').getForm();
form.findField("part5").focus();
}
}
}
},
{xtype: 'displayfield', value: '-'},
{
xtype: 'textfield',
width: 70,
name: 'part5',
maskRe: /[0-9.]/,
//msgTarget: 'down',
maxLength: 6,
enforceMaxLength: 6,
msgTarget: 'side',
enableKeyEvents: true,
listeners: {
//keyup: setCheckValue,
//specialkey: submitOnEnter
}
},
{xtype: 'displayfield', value: '-'}, {
xtype: 'textfield',
width: 30,
name: 'part6',
maskRe: /[0-9.]/,
readOnly: true
}
]
}
]
});