('', {
renderTo: (),
title: 'User Form',
xtype: 'form',
layout: 'anchor',
height: 300,
width: 800,
items: [{
xtype: 'fieldcontainer',
layout: 'hbox',
defaults: {
labelAlign: 'left',
padding: '10 0 0 0'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'firstName'
},
{
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}
]
},
{
// 文本域容器 fieldcontainer
xtype: 'fieldcontainer',
// 在容器中水平排列 hbox 垂直排列 vbox
layout: 'vbox',
defaults: {
xtype: 'textfield',
// name在文本框的位置 top left right
labelAlign: 'left',
// 距离上一个fieldcontainer容器的距离，分别代表上、右、下、左
padding: '5 0 0 0'
},
items: [
{
fieldLabel: 'First Name',
name: 'firstName'
},
{
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}
]
}]
});
});
上面的代码是横排3列和竖排3行的例子，fieldcontainer是文本域的容器，实现页面如下：
2列的话就在fieldcontainer写2个label。