Combining form fields

Ext.apply(Ext.form.field.VTypes, {
SortCode: function(val){
var sortCodeRegex = /^(([0-9][0-9])|(99))$/;
return sortCodeRegex.test(val);
},
SortCodeText: 'Must be a numeric value between 00 and 99',
SortCodeMask: /[\d]/i
});

1. Create a form panel:
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Combining Form Fields',
width: 350,
autoHeight: true,
bodyPadding: 10,
defaults: {
anchor: '100%',
labelWidth: 100
},
items: [],
renderTo: Ext.getBody()
});

2. In the panel's items collection add a FieldContainer with an hbox layout:
var formPanel = Ext.create('Ext.form.Panel', {
...
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Sort Code',
combineErrors: true,
layout: 'hbox',
defaults: {
hideLabel: true,
vtype: 'SortCode'
},
items: []
}],
...
});

3. In the items collection of FieldContainer, add the fields for gathering the
Sort Code:
var formPanel = Ext.create('Ext.form.Panel', {
...
items: [{
...
items: [{
xtype: 'textfield',
name: 'sortcode1',
allowBlank: false,
flex: 1
}, {
xtype: 'displayfield',
value: '-',
margin: '0 0 0 3',
width: 10
}, {
xtype: 'textfield',
name: 'sortcode2',
allowBlank: false,
flex: 1
}, {
xtype: 'displayfield',
value: '-',
margin: '0 0 0 3',
width: 10
}, {
xtype: 'textfield',
name: 'sortcode3',
allowBlank: false,
flex: 1
}]
}],
...
});

4. Finally, add a second field to the panel's items collection for gathering the
account number:
var formPanel = Ext.create('Ext.form.Panel', {
...
items: [{
...
}, {
xtype: 'numberfield',
name: 'accountNumber',
fieldLabel: 'Account Number',
msgTarget: 'side',
minValue: 10000000,
maxValue: 99999999,
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false,
allowBlank: false
}],
...
});