extjs-布局 （在column布局中使用fieldset 和 在fieldset中使用column布局）

 在标准的html中，需要把输入项都放到fieldset中，一次来显示分组结构。虽然EXT中的表单已经很漂亮了，但我么依然可以用fieldset来进行内部分组。

        为了突出显示效果，这里我们可以将column和fieldset（fieldset只是一个普通的xtype）结合起来使用

 1、

[javascript] view plain copy

1. var form = new Ext.form.FormPanel({  
2.          
3.        labelAlign:'right',  
4.        title:'布局',  
5.        labelWidth:50,  
6.        buttonAlign:'center',  
7.        frame:true,  
8.        width:600,  
9.          
10.        items:[{  
11.         layout:'column',  
12.         items:[  
13.         {  
14.          columnWidth:.33,  
15.          layout:'form',  
16.          xtype:'fieldset',  
17.          autoHeight:true,  
18.          defaultType:'textfield',  
19.          title:'俩字',  
20.          items:[  
21.           {fieldLabel:'俩字'},  
22.           {fieldLabel:'俩字'}  
23.           ]  
24.         },  
25.         {  
26.          columnWidth:.33,  
27.          layout:'form',  
28.          xtype:'fieldset',  
29.          autoHeight:true,  
30.          style:'margin-left:10px',  
31.          defaultType:'textfield',  
32.          title:'三字',  
33.          items:[  
34.           {fieldLabel:'三个字'},  
35.           {fieldLabel:'三个字'},  
36.           {fieldLabel:'三个字'}  
37.          ]  
38.         },  
39.         {  
40.          columnWidth:.33,  
41.          layout:'form',  
42.          xtype:'fieldset',  
43.          style:'margin-left:10px',  
44.          autoHeight:true,  
45.          title:'四字',  
46.          defaultType:'textfield',  
47.          items:[  
48.           {fieldLabel:'四个字'},  
49.           {fieldLabel:'四个字'},  
50.           {fieldLabel:'四个字'},  
51.           {fieldLabel:'四个字'}  
52.          ]  
53.         }]  
54.         },{  
55.          xtype:'fieldset',  
56.          autoHeight:true,  
57.          title:'文本域',  
58.          items:[{  
59.           width:345,  
60.           height:100,  
61.           xtype:'textarea',  
62.           fieldLabel:'文本域'  
63.          }]  
64.            
65.         }],  
66.         buttons:[{  
67.           text:'按钮',  
68.           handler:function(){}  
69.          }]  
70.       });  
71.       form.render("form");  

注意xtyp:'fieldset'如果要内部分组，里面的控件要放在items属性里面

 

 2、

[javascript] view plain copy

1. var  set = new Ext.form.FieldSet({  
2.             title:'fieldset',  
3.             columnWidth:.1,  
4.             height:80,  
5.             layout:'column',  
6.             border:true,  
7.             anchor:'100%',  
8.             labelWidth:40,  
9.             items:[{  
10.                 columnWidth:.4,  
11.                 layout:'form',  
12.                 border: false,  
13.                 items:[{  
14.                     xtype:'textfield',  
15.                     fieldLabel:'t1',  
16.                     name:'t1'  
17.                 }]  
18.             },{  
19.                 columnWidth:.4,  
20.                 layout:'form',  
21.                 border:false,  
22.                 items:[{  
23.                     xtype:'textfield',  
24.                     fieldLabel:'t2',  
25.                     name:'t2'  
26.                 }]  
27.             }]  
28.         });  
29.      var  setform = new Ext.form.FormPanel({  
30.             width:300,  
31.             height:80,  
32.             labelWidth:80,  
33.             labelAlign:'right',  
34.             frame:true,  
35.             items:[set]  
36.        });  
37.      var  win = new Ext.Window({  
38.             title:'fieldSet的column布局',  
39.             layout:'fit',  
40.             width:500,  
41.             height:380,  
42.             closeAction:'hide',  
43.             items:[setform]  
44.        });  
45.        win.show();  

注意layout：column位置 ，closeAction:'hide' 这个属性值不要弄错了

效果如下图所示：是以一个窗口的形式显示的

 

顶

0

踩