Code:
Ext.ns('GLOBAL');
GLOBAL.myForm1Ui = Ext.extend(Ext.form.FormPanel, {
frame: true,
padding: 5,
labelWidth: 150,
initComponent: function() {
this.items = [
{
xtype: 'container',
height: 25,
layout: 'hbox',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'spacer',
flex: 1,
width: 155
},
{
xtype: 'checkbox',
name: 'myCheckBx',
width: 15,
ref: '../myCheckBox'
},
{
xtype: 'label',
text: 'myLabel',
flex: 1,
margins: '5,0,0,0',
ref: '../myLabel'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'foo',
anchor: '100%',
name: 'foo',
maxLength: 20,
maxLengthText: 'The maximum length of first name is 20 characters.',
autoCreate: {
tag: 'input',
type: 'text',
maxlength: '20'
},
enableKeyEvents: true,
vtype: 'foo',
stripCharsRe: /^\s*/,
ref: 'foo'
},
{
xtype: 'textfield',
fieldLabel: 'foo',
anchor: '100%',
name: 'foo',
allowBlank: false,
maxLength: 20,
maxLengthText: 'The maximum length of last name is 20 characters.',
autoCreate: {
tag: 'input',
type: 'text',
maxlength: '20'
},
enableKeyEvents: true,
vtype: 'foo',
stripCharsRe: /^\s*/,
ref: 'foo'
},
{
xtype: 'textfield',
fieldLabel: 'foo',
anchor: '100%',
emptyText: '',
name: 'foo',
maxLength: 20,
maxLengthText: 'The maximum length of middle name is 20 characters.',
autoCreate: {
tag: 'input',
type: 'text',
maxlength: '20'
},
enableKeyEvents: true,
vtype: 'foo',
stripCharsRe: /^\s*/,
ref: 'foo'
},
{
xtype: 'textfield',
fieldLabel: 'foo',
anchor: '100%',
name: 'foo',
maxLength: 40,
maxLengthText: 'The maximium length of this field is 40 characters.',
autoCreate: {
tag: 'input',
type: 'text',
maxlength: '40'
},
vtype: 'foo',
enableKeyEvents: true,
stripCharsRe: /^\s*/,
ref: 'foo'
},
{
xtype: 'combo',
fieldLabel: 'Suffix',
anchor: '100%',
name: 'suffix',
mode: 'local',
store: 'foo',
displayField: 'text',
valueField: 'value',
triggerAction: 'all',
typeAhead: true,
forceSelection: true,
enableKeyEvents: true,
typeAheadDelay: 0,
ref: 'foo'
},
{
xtype: 'combo',
fieldLabel: 'foo',
anchor: '100%',
name: 'foo',
store: 'foo',
displayField: 'text',
valueField: 'value',
triggerAction: 'all',
mode: 'local',
typeAhead: true,
forceSelection: true,
enableKeyEvents: true,
typeAheadDelay: 0,
ref: 'foo'
},
{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
anchor: '100%',
name: 'dateOfBirth',
autoCreate: {
tag: 'input',
type: 'text',
maxlength: '10'
},
vtype: 'dobField',
altFormats: 'm/d/Y|mdY|n/j/Y',
invalidText: '{0} is not a valid date - it must be in the format \'MM/DD/YYYY\'.',
maskRe: /[0-9\/]/i,
enableKeyEvents: true,
minValue: '01/01/1899',
stripCharsRe: /^\s*/,
ref: 'foo'
},
{
xtype: 'datefield',
fieldLabel: 'foo',
anchor: '100%',
name: 'foo',
vtype: 'foo',
autoCreate: {
tag: 'input',
type: 'text',
maxlength: '10'
},
altFormats: 'm/d/Y|mdY|n/j/Y',
invalidText: '{0} is not a valid date - it must be in the format \'MM/DD/YYYY\'.',
maskRe: /[0-9\/]/i,
enableKeyEvents: true,
stripCharsRe: /^\s*/,
ref: 'foo'
},
{
xtype: 'textfield',
fieldLabel: 'foo',
anchor: '100%',
name: 'ssn',
autoCreate: {
tag: 'input',
type: 'text',
maxlength: '11'
},
vtype: 'foo',
enableKeyEvents: true,
stripCharsRe: /^\s*/,
ref: 'foo'
},
{
xtype: 'combo',
fieldLabel: 'foo',
anchor: '100%',
name: 'foo',
mode: 'local',
store: 'foo',
displayField: 'text',
valueField: 'value',
triggerAction: 'all',
forceSelection: true,
typeAhead: true,
enableKeyEvents: true,
typeAheadDelay: 0,
ref: 'foo'
},
{
xtype: 'combo',
fieldLabel: 'foo',
anchor: '100%',
name: 'foo',
mode: 'local',
store: 'foo',
displayField: 'text',
valueField: 'value',
triggerAction: 'all',
forceSelection: true,
typeAhead: true,
enableKeyEvents: true,
typeAheadDelay: 0,
ref: 'foo'
},
{
xtype: 'combo',
fieldLabel: 'foo',
anchor: '100%',
name: 'category',
mode: 'local',
store: 'foo',
displayField: 'text',
valueField: 'value',
triggerAction: 'all',
forceSelection: true,
typeAhead: true,
enableKeyEvents: true,
vtype: 'foo',
typeAheadDelay: 0,
ref: 'foo'
},
{
xtype: 'combo',
fieldLabel: 'foo',
anchor: '100%',
name: 'foo',
mode: 'local',
valueField: 'value',
displayField: 'text',
forceSelection: true,
typeAhead: true,
triggerAction: 'all',
vtype: 'foo',
enableKeyEvents: true,
typeAheadDelay: 0,
ref: 'foo'
},
{
xtype: 'foo',
fieldLabel: 'License #',
anchor: '100%',
name: 'foo',
vtype: 'foo',
autoCreate: {
tag: 'input',
type: 'text',
maxlength: '25'
},
enableKeyEvents: true,
stripCharsRe: /^\s*/,
ref: 'foo'
},
{
xtype: 'datefield',
fieldLabel: 'foo',
anchor: '100%',
name: 'foo',
vtype: 'foo',
autoCreate: {
tag: 'input',
type: 'text',
maxlength: '10'
},
altFormats: 'm/d/Y|mdY|n/j/Y',
invalidText: '{0} is not a valid date - it must be in the format \'MM/DD/YYYY\'.',
maskRe: /[0-9\/]/i,
enableKeyEvents: true,
stripCharsRe: /^\s*/,
ref: 'foo'
},
{
xtype: 'datefield',
fieldLabel: 'foo',
anchor: '100%',
name: 'foo',
vtype: 'foo',
autoCreate: {
tag: 'input',
type: 'text',
maxlength: '10'
},
altFormats: 'm/d/Y|mdY|n/j/Y',
invalidText: '{0} is not a valid date - it must be in the format \'MM/DD/YYYY\'.',
maskRe: /[0-9\/]/i,
enableKeyEvents: true,
stripCharsRe: /^\s*/,
ref: 'foo'
},
{
xtype: 'datefield',
fieldLabel: 'foo',
anchor: '100%',
name: 'foo',
autoCreate: {
tag: 'input',
type: 'text',
maxlength: '10'
},
altFormats: 'm/d/Y|mdY|n/j/Y',
invalidText: '{0} is not a valid date - it must be in the format \'MM/DD/YYYY\'.',
maskRe: /[0-9\/]/i,
enableKeyEvents: true,
stripCharsRe: /^\s*/,
ref: 'foo'
}
];
GLOBAL.myForm1Ui.superclass.initComponent.call(this);
}
});