Ext表单布局

默认的平铺布局

如果不进行任何设置，将控件加入到表单中，就是自上而下的平铺布局。

如：

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"

});

效果：