详解extjs的灵便布局的表单

详解extjs的灵活布局的表单

详解extjs的灵活布局的表单

?

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

?

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

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

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

??

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

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

?

?

?

行1的完整代码是：

items:[{//行1layout:"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}]}]}

?

?

?