Extjs Column布局常见问题及解决方法

第一次用Extjs的column布局时遇见了很多问题，记录下来，供大家参考。column布局时常会碰见label不能显示或者控件显示错位等问题，导致这些问题的常见原因如下：

1.formPanel上的控件显示不出来，控件的宽度太大，formpanel的宽度相对太小导致。

2.为FormPanel设定了defaultType属性，没有为每个控件单独制定xtype属性。正确的做法是不设置defaultType。

3.在每个column里再加上form layout，再在form里加textfield。

4.在新建TabPanel时，将其属性layoutOnTabChange设置为true即可。（此方法不通用）

实例代码如下：

1. Ext.onReady(function(){ 
2.  
3.      
4.             Ext.QuickTips.init(); 
5.  
6.     // turn on validation errors beside the field globally 
7.     Ext.form.Field.prototype.msgTarget = 'side'; 
8.  
9.     var bd = Ext.getBody(); 
10.  
11. var detailForm = new Ext.FormPanel({ 
12.         id:"detail", 
13.         layout:"form", 
14.         labelWidth: 60, 
15.         labelAlign:"right", 
16.         border:false, 
17.         frame:true, 
18.         width: 600,//宽度设置要合理，如果FormPanel的宽度小于控件的宽度，column布局时控件不能正常显示 
19.         height:400, 
20. //      autoHeight:true, 
21. //      defaultType: 'textfield',//column布局时不能设置该属性，否则不能正常显示 
22.         items: [{//第一行 
23.             layout:"column", 
24.             items:[{ 
25.                 columnWidth:.3,//第一列 
26.                 layout:"form", 
27.                 items:[{ 
28.                     xtype:"textfield", 
29.                     fieldLabel: '合同编号', 
30.                     name: 'contractId', 
31.                     width:100 
32.                     }] 
33.             },{ 
34.                 columnWidth:.3,//第二列 
35.                 layout:"form", 
36.                 items:[{ 
37.                     xtype:"textfield", 
38.                     fieldLabel: '合同名称', 
39.                     name: 'contractId1', 
40.                     width:100 
41.                     }] 
42.             },{ 
43.                 columnWidth:.3,//第三列 
44.                 layout:"form", 
45.                 items:[{ 
46.                     xtype:"textfield", 
47.                     fieldLabel: '合同', 
48.                     name: 'contractId2', 
49.                     width:100 
50.                     }] 
51.             }]},//第一行结束 
52.             {//第一行 
53.             layout:"column", 
54.             items:[{ 
55.                 columnWidth:.3,//第一列 
56.                 layout:"form", 
57.                 items:[{ 
58.                     xtype:"textfield", 
59.                     fieldLabel: '合同编号', 
60.                     name: 'contractId', 
61.                     width:100 
62.                     }] 
63.             },{ 
64.                 columnWidth:.3,//第二列 
65.                 layout:"form", 
66.                 items:[{ 
67.                     xtype:"textfield", 
68.                     fieldLabel: '合同名称', 
69.                     name: 'contractId1', 
70.                     width:100 
71.                     }] 
72.             },{ 
73.                 columnWidth:.3,//第三列 
74.                 layout:"form", 
75.                 items:[{ 
76.                     xtype:"textfield", 
77.                     fieldLabel: '合同', 
78.                     name: 'contractId2', 
79.                     width:100 
80.                     }] 
81.             }]},//第一行结束 
82.             {//第一行 
83.             layout:"column", 
84.             items:[{ 
85.                 columnWidth:.3,//第一列 
86.                 layout:"form", 
87.                 items:[{ 
88.                     xtype:"textfield", 
89.                     fieldLabel: '合同编号', 
90.                     name: 'contractId', 
91.                     width:100 
92.                     }] 
93.             },{ 
94.                 columnWidth:.3,//第二列 
95.                 layout:"form", 
96.                 items:[{ 
97.                     xtype:"textfield", 
98.                     fieldLabel: '合同名称', 
99.                     name: 'contractId1', 
100.                     width:100 
101.                     }] 
102.             },{ 
103.                 columnWidth:.3,//第三列 
104.                 layout:"form", 
105.                 items:[{ 
106.                     xtype:"textfield", 
107.                     fieldLabel: '合同', 
108.                     name: 'contractId2', 
109.                     width:100 
110.                     }] 
111.             }]}//第一行结束 
112.            ] 
113.       });  
114.  
115.  
116.  
117. var win =  new  Ext.Window( 
118.                { 
119.                 id:"window", 
120.                 title: " 合同信息 " , 
121.                 layout: 'border', 
122.                 width:600, 
123.                 height:500, 
124.                 closeAction:'hide', 
125.                 plain: true, 
126.                  
127.                 items:[new Ext.TabPanel({ 
128.                         region: 'center', 
129.                         deferredRender: false, 
130. //                      layoutOnTabChange:true,//在TabPanel中采用column布局时，有时需要设置该属性 
131.                         activeTab: 0, //活动的tab索引 
132.                         items: [{ 
133.                             //contentEl: 'tab1', 
134.                             title: '合同明细', 
135.                             closable: false, //关闭项 
136.                             autoScroll: false, //是否自动显示滚动条 
137.                             layout:'fit', 
138.                             collapsible: true, 
139.                             split:true, 
140.                             margins:'0 0 0 0', 
141.                             items:[detailForm] 
142.                         },{ 
143.                             //contentEl: 'tab2', 
144.                             title: '规格明细', 
145.                             closable: false, //关闭项 
146.                             autoScroll: false, //是否自动显示滚动条 
147.                             layout:'fit', 
148.                             collapsible: true, 
149.                             split:true, 
150.                             margins:'0 0 0 0' 
151.                         }] 
152.                     })], 
153.                  
154.                 buttons: [{ 
155.                     text:'Submit', 
156.                     disabled:true 
157.                 },{ 
158.                     text: 'Close', 
159.                     handler: function(){ 
160.                         win.hide(); 
161.                        // detailForm.destroy(); 
162.                     } 
163.                 }] 
164.  
165.       });     
166.     
167.     //显示窗口 
168.     win.show(); 
169.  
170. }); 

本文转自sucre03 51CTO博客，原文链接：http://blog.51cto.com/sucre/884279，如需转载请自行联系原作者