ExtJS Form

Ext.require([
'Ext.form.*',
'Ext.layout.container.Column',
'Ext.window.MessageBox',
'Ext.fx.target.Element'
]);Ext.onReady(function () { var individual = {
xtype: 'container',
layout: 'hbox',
margin: '0 0 10',
items: [{
xtype: 'fieldset',
flex: 1,
title: 'Indiviual Checkboxed', //geren checkbox
defaultType: 'checkbox',
defaults: {
anchor: '100%',
hideEmptyLabel: false //fieldLabel 当没有设置fieldLabel 的时候，fieldLabel空间会被保留
},
items: [{
xtype: 'textfield',
name: 'text-test1',
fieldLabel: 'Alignment Test'
}, {
fieldLabel: 'Favorite Animals',
boxLabel: 'Dog',
name: 'fav-animal-dog', //
inputValue: 'dog'
}, {
boxLabel: 'Cat',
name: 'fav-animal-cat', //
inputValue: 'cat'
}, {
checked: true, //默认选中
boxLabel: 'Monkey',
name: 'fav-animal-monkey', //
inputValue: 'monkey'
}]
}, {
xtype: 'component',
width: 10
}, {
xtype: 'fieldset',
flex: 1,
title: 'Individual Radios', //个人radio
defaultType: 'radio',
layout: 'anchor',
defaults: {
anchor: '100%',
hideEmptyLabel: false
},
items: [{
xtype: 'textfield',
name: 'txt-test2',
fieldLabel: 'Alignment Test'
}, {
checked: true,
fieldLabel: 'Favorite Color',
boxLabel: 'Red',
name: 'fav-color',
inputValue: 'Red'
}, {
boxLabel: 'Blue',
name: 'fav-color',
inputValue: 'blue'
}, {
boxLabel: 'Green',
name: 'fav-color',
inputValue: 'green'
}]
}] }; var fp = Ext.create('Ext.FormPanel', {
title: 'Check/Radio Groups Example',
frame: true,
fieldDefaults: {
labelWidth: 110,
labelStyle: 'color:green,padding-left:4px'
},
width: 600,
renderTo:Ext.getBody(),
bodyPadding: 10,
items: [
individual
],
buttons: [{
text: 'Save',
handler: function () {
//fp.getForm()返回的Ext.form.Basic对象。
if (fp.getForm().isValid()) {
Ext.Msg.alert('Submited Values', 'The fllowing wll be sent to the server:<br/>' +
fp.getForm().getValues(true).replace(/&/g, ', ')
);
}
}
}, {
text: 'Reset',
handler: function () {
fp.getForm().reset();
}
}]
});});

var checkGroup = {
xtype: 'fieldset',
title: 'CheckBox Groups (initially collapsed)',
layout: 'anchor',
defaults: {
anchor: '100%'
},
collapsible: true, //可折叠的
collapsed: false, //true:fieldset的状态 默认是折叠起来的 false:展开
items: [{
xtype: 'textfield',
name: 'text-test3',
fieldLabel: 'Alignment Test' //队列测试
}, {
//Use the default,auomtic layout to distribute the controls evenly
//across a single row 横向导航
xtype: 'checkboxgroup',
fieldLabel: 'Auto Layout', //自动布局
cls: 'x-check-group-alt',
items: [
{ boxLabel: 'Item1', name: 'cb-auto-1' },
{ boxLabel: 'Item2', name: 'cb-auto-2', checked: true },
{ boxLabel: 'Item3', name: 'cb-auto-3' },
{ boxLabel: 'Item4', name: 'cb-auto-4' },
{ boxLabel: 'Item5', name: 'cb-auto-5' }
]
}, {
xtype: 'checkboxgroup',
fieldLabel: 'Single Column',
//put all controls in a single column with width 100% 把所有控件放在一行里 宽度100%
columns: 1, //每行显示一列
items: [
{ boxLabel: 'Item 1', name: 'cb-col-1' },
{ boxLabel: 'Item 2', name: 'cb-col-2', checked: true },
{ boxLabel: 'Item 3', name: 'cb-col-3' }
]
}, {
xtype: 'checkboxgroup',
fieldLabel: 'Muti-Column (horizontal)', //多列 对行
cls: 'x-check-group-alt',
//Distribute controls across 3 even columns,filling each row //平等分配成三行
//form left to right before starting the next row
columns: 3, //每行显示三列
items: [
{ boxLabel: 'Item 1', name: 'cb-horiz-1' },
{ boxLabel: 'Item 2', name: 'cb-horiz-2' },
{ boxLabel: 'Item 3', name: 'cb-horiz-3' },
{ boxLabel: 'Item 4', name: 'cb-horiz-4' },
{ boxLabel: 'Item 5', name: 'cb-horiz-5' }
]
}, {
xtype: 'checkboxgroup',
fieldLabel: 'Muti-Column<br />(custom widths)',
cls: 'x-check-group-alt',
//Specify exact column widths(could also include float values for %)
//制定确切的列宽 （也可以用百分比）
columns: [100, 100], //每行两列 每列宽度100
vertical: true,
items: [
{ boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1 },
{ boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true },
{ boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3 },
{ boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4 },
{ boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5 }
]
}, {
xtype: 'checkboxgroup',
fieldLabel: 'Custom Layout <br />(w/ validation)',
allowBlanl: false,
msgTarget: 'side',
autoFitErrors: false,
anchor: '-18',
//You can change the 'layout' to anything you want,and include any nested(嵌套)
//container structure(结构，构造),for complete layout control.In this example we only
//want one item in the middle column,which would not be possible using the
//default 'checkboxgroup' layout's columns config.we also want to put
//heading at the top of each column
layout: 'column',
defaultType: 'container',
items: [{
columnWidth: .25,
items: [
{ xtype: 'component', html: 'Heading 1', cls: 'x-form-check-group-label' },
{ xtype: 'checkboxfield', boxLabel: 'Item 1', name: 'cb-cust-1' },
{ xtype: 'checkboxfield', boxLabel: 'Item2', name: 'cb-cust-2' }
]
}, {
columnWidth: .5,
items: [
{ xtype: 'component', html: 'Heading 2', cls: 'x-form-check-group-label' },
{ xtype: 'checkboxfield', boxLabel: 'A long item just for fun', name: 'cb-cust-3' }
]
}, {
columnWidth: .25,
items: [
{ xtype: 'component', html: 'Heading 3', cls: 'x-form-check-group-label' },
{ xtype: 'checkboxfield', boxLabel: 'Item 4', name: 'cb-cust-4' },
{ xtype: 'checkboxfield', boxLabel: 'Item 5', name: 'cb-cust-5' } ]
}]
}]
};