详解extjs的灵活布局的表单

来源:http://z-xiaofei168.iteye.com/blog/1136291

详解extjs的灵活布局的表单

详解extjs的灵活布局的表单



我们发现，布局其实是由行和列组件组成，分成由左往右和由上往下两个方向，由左往右叫column，由上往下叫form。

整个大的表单是form布局，从上往下放置了5个小布局，在这里我以行n标记。

行1：行1从左往右有3个表单组件，所以是column布局；

Js代码


{
layout:"column",
items:[{},{},{}] //items表示指定布局内的表单组件集合，在此有3个
}

行1内其实还有3个form布局，因为每个布局中都有一个表单组件，所以看起来并不是那么明显，我们完全可以放置多个表单组件到布局中。

Js代码


<strong>{
layout:"form",
items:[{}] //只有一个表单组件
}
</strong>

行1的完整代码是：

Js代码


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
}]
}]
}