详解extjs的灵活布局的表单
我们发现,布局其实是由行和列组件组成,分成由左往右和由上往下两个方向,由左往右叫column,由上往下叫form。
整个大的表单是form布局,从上往下放置了5个小布局,在这里我以行n标记。
行1:行1从左往右有3个表单组件,所以是column布局;
{
layout:"column",
items:[{},{},{}] //items表示指定布局内的表单组件集合,在此有3个
}
行1内其实还有3个form布局,因为每个布局中都有一个表单组件,所以看起来并不是那么明显,我们完全可以放置多个表单组件到布局中。
<strong>{
layout:"form",
items:[{}] //只有一个表单组件
}
</strong>
items:[{//行1
layout:"column",//从左往右的布局
items:[{
columnWidth:.3,//该列在整行中所占的百分比
layout:"form",//从上往下的布局
items:[{
xtype:"textfield",
fieldLabel:"姓名",
allowBlank:false,
width:120
}]
},{
columnWidth:.3,//该列在整行中所占的百分比
layout:"form",//从上往下的布局
items:[{
xtype:"textfield",
inputType:"password",
fieldLabel:"密码",
allowBlank:false,
minLength:6,
maxLength:16,
minLengthText:"温馨提示 :密码长度最小为6个字符",
maxLengthText:"温馨提示 :密码长度最小为16个字符",
width:120
}]
},{
columnWidth:.3,//该列在整行中所占的百分比
layout:"form",//从上往下的布局
items:[{
xtype:"textfield",
fieldLabel:"邮箱",
vtype:"email",
allowBlank:false,
width:120
}]
}]
}
自己的一个实现:
var collectionRuleForm = new Ext.FormPanel({
name : 'collectionRuleForm',
labelAlign : 'right',
labelWidth : 80,
frame : true,
bodyStyle : 'padding:5 5 5 5',
items:[{//行1
layout:"column",//从左往右的布局
items:[{
columnWidth:.3,//该列在整行中所占的百分比
layout:"form",//从上往下的布局
items:[{
name : 'title',
fieldLabel : '名称',
xtype : 'textfield',
allowBlank : false,
anchor : '99%'
}]
},{
columnWidth:.3,//该列在整行中所占的百分比
layout:"form",//从上往下的布局
items:[{
name : 'sort_by',
fieldLabel : '排序',
xtype : 'numberfield',
anchor : '99%'
}]
},{
columnWidth:.3,//该列在整行中所占的百分比
layout:"form",//从上往下的布局
items:[{
name : 'bank_desc',
fieldLabel : '类型描述',
allowBlank : true,
xtype : 'textarea',
anchor : '99%'
}]
}]
},{//第二行
layout:"column",//从左往右的布局
items:[{
columnWidth:.3,//该列在整行中所占的百分比
layout:"form",//从上往下的布局
items:[{
name : 'title',
fieldLabel : '名称',
xtype : 'textfield',
allowBlank : false,
anchor : '99%'
}]
},{
columnWidth:.3,//该列在整行中所占的百分比
layout:"form",//从上往下的布局
items:[{
name : 'sort_by',
fieldLabel : '排序',
xtype : 'numberfield',
anchor : '99%'
}]
},{
columnWidth:.3,//该列在整行中所占的百分比
layout:"form",//从上往下的布局
items:[{
name : 'bank_desc',
fieldLabel : '类型描述',
allowBlank : true,
xtype : 'textarea',
anchor : '99%'
}]
}]
}]
});
转载自:http://z-xiaofei168.iteye.com/blog/1136291