详解extjs的灵活布局的表单

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

详解extjs的灵活布局的表单

 

详解extjs的灵活布局的表单

 

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

 

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

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

Js代码  

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

  

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

Js代码  

1. <strong>{  
2.    layout:"form",  
3.    items:[{}] //只有一个表单组件  
4. }  
5. </strong>  

 

 

 

行1的完整代码是：

Js代码  

1. items:[{//行1  
2.                     layout:"column",//从左往右的布局   
3.                     items:[{  
4.                         columnWidth:.3,//该列在整行中所占的百分比    
5.                         layout:"form",//从上往下的布局   
6.                         items:[{  
7.                             xtype:"textfield",  
8.                             fieldLabel:"姓名",  
9.                             allowBlank:false,  
10.                             width:120  
11.                         }]  
12.                     },{  
13.                         columnWidth:.3,//该列在整行中所占的百分比    
14.                         layout:"form",//从上往下的布局   
15.                         items:[{  
16.                             xtype:"textfield",  
17.                             inputType:"password",  
18.                             fieldLabel:"密码",  
19.                             allowBlank:false,  
20.                             minLength:6,  
21.                             maxLength:16,  
22.                             minLengthText:"温馨提示 ：密码长度最小为6个字符",  
23.                             maxLengthText:"温馨提示 ：密码长度最小为16个字符",  
24.                             width:120  
25.                         }]  
26.                     },{  
27.                         columnWidth:.3,//该列在整行中所占的百分比    
28.                         layout:"form",//从上往下的布局   
29.                         items:[{  
30.                             xtype:"textfield",  
31.                             fieldLabel:"邮箱",  
32.                             vtype:"email",  
33.                             allowBlank:false,  
34.                             width:120  
35.                         }]  
36.                     }]  
37.         }