ExtJs——FormPanel（布局）！！！

FormPanel就两种布局方式：

    form——从上往下

    column——从左往右

注意落实到任何一个表单最后总是form布局。

 

 

[javascript] view plaincopyprint?

1. Ext.onReady(function(){  
2.     //行1  
3.     var row1 = {  
4.         layout:'column',    //从左往右布局  
5.         items:[{  
6.             columnWidth:.3, //该列有整行中所占百分比  
7.             layout:'form',  //从上往下布局  
8.             items:[{  
9.                 xtype:'textfield',  
10.                 fieldLabel:'姓',  
11.                 width:120  
12.             }]  
13.         },{  
14.             columnWidth:.3,  
15.             layout:'form',  
16.             items:[{  
17.                 xtype:'textfield',  
18.                 fieldLabel:'名',  
19.                 width:120  
20.             }]  
21.         },{  
22.             columnWidth:.3,  
23.             layout:'form',  
24.             items:[{  
25.                 xtype:'textfield',  
26.                 fieldLabel:'英文名',  
27.                 width:120  
28.             }]  
29.         }]  
30.     };  
31.     //行2  
32.     var row2 = {  
33.         layout:'column',  
34.         items:[{  
35.             columnWidth:.5,  
36.             layout:'form',  
37.             items:[{  
38.                 xtype:'textfield',  
39.                 fieldLabel:'座右铭1',  
40.                 width:220  
41.             }]  
42.         },{  
43.             columnWidth:.5,  
44.             layout:'form',  
45.             items:[{  
46.                 xtype:'textfield',  
47.                 fieldLabel:'座右铭2',  
48.                 width:220  
49.             }]  
50.         }]  
51.     };  
52.     //行3  
53.     var row3 = {  
54.         layout:'form',  
55.         items:[{  
56.             xtype:'textfield',  
57.             fieldLabel:'奖励',  
58.             width:500  
59.         },{  
60.             xtype:'textfield',  
61.             fieldLabel:'处罚',  
62.             width:500  
63.         }]  
64.     };  
65.     //行4  
66.     var row4 = {  
67.         layout:'column',  
68.         items:[{  
69.             columnWidth:.2,  
70.             layout:'form',  
71.             items:[{  
72.                 xtype:'textfield',  
73.                 fieldLabel:'最爱电影',  
74.                 width:50  
75.             }]  
76.         },{  
77.             columnWidth:.2,  
78.             layout:'form',  
79.             items:[{  
80.                 xtype:'textfield',  
81.                 fieldLabel:'最爱音乐',  
82.                 width:50  
83.             }]  
84.         },{  
85.             columnWidth:.2,  
86.             layout:'form',  
87.             items:[{  
88.                 xtype:'textfield',  
89.                 fieldLabel:'最爱明星',  
90.                 width:50  
91.             }]  
92.         },{  
93.             columnWidth:.2,  
94.             layout:'form',  
95.             items:[{  
96.                 xtype:'textfield',  
97.                 fieldLabel:'最爱运动',  
98.                 width:50  
99.             }]  
100.         }]  
101.     };  
102.     //行5  
103.     var row5 = {  
104.         layout:'form',  
105.         items:[{  
106.             xtype:'htmleditor',  
107.             fieldLabel:'获奖文章',  
108.             height:150  
109.         }]  
110.     };  
111.     //form  
112.     var form = new Ext.form.FormPanel({  
113.         renderTo:Ext.getBody(),  
114.         title:'灵活的表单布局',  
115.         width:650,  
116.         autoHeight:true,  
117.         frame:true,  
118.         layout:'form',  
119.         labelWidth:65,  
120.         labelAlign:'right',  
121.         style:'padding:10px',  
122.         items:[row1,row2,row3,row4,row5],  
123.         buttonAlign:'center',  
124.         buttons:[{  
125.             text:'提交'  
126.         },{  
127.             text:'重置'  
128.         }]  
129.     });  
130. });