默认的平铺布局
如果不进行任何设置，将控件加入到表单中，就是自上而下的平铺布局。
如：
var form = new Ext.form.FormPanel({
title:"默认布局",
width:500,
defaultType:"textfield",
items:[
{fieldLabel:"标签1"},
{fieldLabel:"标签2"},
{fieldLabel:"标签3"}
],
buttons:[
{text:"确定"}
],
renderTo:"defaultFormLayout"
});
Form中的标签默认使用左对齐方式，有top、left、right3个值可以选择。
通过labelAlign设置标签对齐方式，通过labelWidth设置标签宽度。
21.2平行分列布局
使用layout:’form’指明要使用列布局，在items中使用columnWidth指定每列所占宽度的百分比。
使用列布局，就不能使用defaultType指定默认的xtype了，每一列也必须手动指定layout:’form’，这样才能在每列正常显示标签和输入框。
示例：
var form = new Ext.form.FormPanel( {
title:"列布局",
width:500,
layout:"column", // 列布局
labelAlign:'right',
labelWidth:55,
frame:true,
items:[
{
columnWidth:0.33,
layout:'form',
items:[
{fieldLabel:"AAA2",xtype:"textfield",name:"a"},
{fieldLabel:"AAA3",xtype:"textfield",name:"d"},
{fieldLabel:"AAA4",xtype:"textfield",name:"e"}]},
{
columnWidth:0.33,
layout:'form',
items:[
{fieldLabel:"BBB",xtype:"textfield",name:"b"}]},
{
columnWidth:0.33,
layout:'form',
items:[
{fieldLabel:"CCC",xtype:"textfield",name:"c"}]}
],
buttons:[
{text:"确定",handler:function() {
form.getForm().submit();
}}
],
renderTo:'columnFormLayout'
});
效果：
21.3.使用默认布局和分列布局实现复杂布局
/**
*AAA|BBB为一列，CCC|DDD|EEE为一列，这2个使用列布局。
*AAA&BBB这个整体使用column布局，AAA/BBB使用form布局。（自上而下布局）
*CCC&DDD&EEE这个整体使用column布局，CCC/DDD/EEE使用Form布局。
*TextArea使用Form布局。
*/
Ext.onReady(function() {
var form = new Ext.form.FormPanel({
title:"使用默认布局和分列布局实现复杂布局效果",
width:750,
frame:true,
labelAlign:"right",
labelWidth:60,
items:[
{
layout:"column",
items:[
{
layout:"form",
columnWidth:0.5,
defaultType:"textfield",
items:[
{fieldLabel:"AAA"},
{fieldLabel:"BBB"}
]
},
{
layout:"form",
columnWidth:0.5,
defaultType:"textfield",
items:[
{fieldLabel:"CCC"},
{fieldLabel:"DDD"},
{fieldLabel:"EEE"}
]
}
]
},
{
layout:'form',
xtype:"textarea",
fieldLabel:"TextArea",
width:600,
height:150
}
],
buttons:[
{text:"OK",
handler:function() {
form.getForm().submit();
}}
],
renderTo:'columnDefaultFormLayout'
});
});
效果：
21.4.在布局中使用FieldSet
在标准HTML中可以使用fieldset来显示分组效果，虽然Ext中表单已经很漂亮了，但是依然可以使用fieldset来实现分组效果。
示例：
var form = new Ext.form.FormPanel({
title:"FieldSet实现分组效果",
width:550,
labelWidth:60,
labelAlign:"right",
items:[
{
layout:"column",
items:[
{
columnWidth:0.5,//分组1占一行的宽度的50%
layout:"form", // 分组中的每一列使用默认布局
xtype:"fieldset", // 分组
title:"分组1", // 分组名称
autoHeight:true, // 自动高度
items:[
{xtype:"textfield",fieldLabel:"TextField1"},
{xtype:"textfield",fieldLabel:"TextField2"}
]
},
{
columnWidth:0.5,//分组2占一行的宽度的50%
layout:'form',
xtype:'fieldset',
title:"分组2",
autoHeight:true,
style:"margin-left:20px", // 与分组1之间保留点空隙，防止与分组1挨着，这样好看些
items:[
{xtype:"textfield",fieldLabel:"TextField3"},
{xtype:"textfield",fieldLabel:"TextField4"},
{xtype:"textfield",fieldLabel:"TextField5"}
]
}
]
},
{
layout:"form",
xtype:"fieldset",
title:"分组3",
autoHeight:true,
style:"margin-top:10px", // 与分组1/分组2之间保留一些空隙。
items:{
xtype:"textarea",
width:500,
height:150,
fieldLabel:"TextArea"
}
}
],
buttons:[{
text:"OK",
handler:function() {
form.getForm().submit();
}
}],
renderTo:"fieldsetGroup"
});
效果：
21.5自定义布局：在表单中加入图片
Ext.form.FormPanel继承自Ext.Panel，因此可以使用items和layout提供的各种布局形式。这里使用xtype:”panel”，来放一张图片。
示例：
var form = new Ext.form.FormPanel({
title:"在表单中加入图片",
width:650,
labelAlign:"right",
labelWidth:60,
frame:true,
items:[
{
layout:"column",
items:[
{
columnWidth:0.5,
layout:"form",
xtype:"fieldset",
title:"Fieldset1",
autoHeight:true,
items:[
{xtype:"textfield",fieldLabel:"Text1"},
{xtype:"textfield",fieldLabel:"Text2"}
]
},
{
columnWidth:0.5,
layout:"form",
xtype:"fieldset",
title:"Fieldset2",
autoHeight:true,
style:"margin-left:20px",
items:[
{xtype:"textfield",fieldLabel:"Text3"},
{xtype:"textfield",fieldLabel:"Text4"}
]
}
]
},
{
xtype:"panel",
html:"<imgsrc='http://misc.360buyimg.com/lib/img/e/logo.png'>"
},
{
xtype:"fieldset",
title:"fieldset3",
autoHeight:true,
style:"margin-top:10px",
items:[
{
xtype:"textarea",
fieldLabel:"TextArea",
width:500,
height:120
}
]
}
],
buttons:[{text:"OK"}],
renderTo:"otherlayout"
});
效果：
