一、默认的平铺布局
自上而下的布局方式。
二、平行分列布局
说明:先使用layout:’column‘来说明要使用的是列布局,然后再items指定的每列中使用columnWidth指定每列所占总宽度的百分比。如果使用分列布局,就不能在表单中使用defaultType指定默认的xtype了,否则会影响布局结果。每一列中也必须手动指定使用layout:’form‘,这样才能在每列中正常显示输入框和对应标签。layout:’form‘是FormPanel默认使用的布局方式,即自上而下依次排列。
》》》示例:
var form = new Ext.form.FormPanel({
labelAlign:‘right‘,
labelWidth:60,
title:’form‘,
frame:true,
width:650,
url:’页面名.jsp‘,
items:[{
layout:’column‘,
items:[{
columnWidth:.33,
layout:’form‘,
items:[{xtype:’textfield‘,fieldLabel:’‘俩字}]
},{
columnWidth:.33,
layout:’form‘,
items:[{xtype:’textfield‘,fieldLabel:’三个字‘}]
},{
columnWidth:.33,
layout:’form‘,
items:[{xtype:’textfield‘,fieldLabel:’四个汉字‘}]
}]
}],
buttons:[{
text:’按钮‘,
handler:function(){
form.getForm().submit();
}
}]
});
三、在布局中使用fieldset
说明:虽然EXT中的表单很漂亮了,依然可以用fieldset来进行内部分组。
》》》示例:
items:[{
layout:’column‘,
items:[{
columnWidth:.5,
layout:’form‘,
xtype:’fieldset‘,
title:’俩字‘,
autoHeight:true,
defaultType:’textfield‘,
items:[
{fieldLabel:’俩字‘},
{fieldLabel:’俩字‘}
]
},{
columnWidth:.5,
layout:’form‘,
xtype:’fieldset‘,
title:’三个字‘,
autoHeight:true,
style:’margin-left:20px‘,
defaultType:’textfield‘,
items:[
{fieldLabel:’三个字‘},
{fieldLabel:’三个字‘},
{fieldLabel:’三个字‘}
]
}]
},{
xtype:’fieldset‘,
title:’四个汉字‘,
autoHeight:true,
items:[{
width:345,
height:100,
xtype:’textarea‘,
fieldLabel:’四个汉字‘
}]
}],
四、在fieldset中使用布局
说明:直接在表单里使用分列布局很简单。
五、自定义布局
说明:向表单中添加不属于Ext.form.Field子类的控件,比如图片和文字之类的静态内容。因为Ext.form.FormPanel继承自Ext.Panel,所以可以使用layout和items提供各种内部布局形式。除了Ext.form.Field之类的输入控件外,还可以使用其他Panel来装饰表单。
》》》示例:
{
columnWidth:.5,
layout:’form‘,
xtype:’fieldset‘,
title:’三个字‘,
autoHeight:true,
style:’margin-left:20px‘,
defaultType:’textfield‘,
items:[
{fieldLabel:’三个字‘},
{fieldLabel:’三个字’},
{fieldLabel:’三个字‘},
{xtype:’panel‘,html:’<center><img src="图片名.png"/></center>‘}
]
}