Ext.js5表格—多列的表格（比fieldcontainer布局效率很多）(48)

/**
* Demonstrates a simple contact form.
* 示例一个简单的联系表格
*/
Ext.define('KitchenSink.view.form.MultiColumn', {
extend: 'Ext.form.Panel',
xtype: 'form-multicolumn',

title: 'Multi Column Form',
frame: true,
resizable: true,
minHeight: 200,
//这个布局比fieldcontainer简单太多
layout: 'column',

defaults: {
layout: 'form',
xtype: 'container',
defaultType: 'textfield',
style: 'width: 50%'
},

items: [{
items: [
{ fieldLabel: 'First Name' },
{ fieldLabel: 'Last Name' },
{ fieldLabel: 'Phone Number' },
{ fieldLabel: 'Email Address' }
]
}, {
items: [
{ fieldLabel: 'Street Address 1' },
{ fieldLabel: 'Street Address 2' },
{ fieldLabel: 'City, State' },
{ fieldLabel: 'ZIP code' }
]
}],

buttons: [
{ text: 'OK' },
{ text: 'Cancel' }
],

initComponent: function() {
this.width = 590;
this.minWidth = 590;
this.callParent();
}
});