第一次用Extjs的column佈局時遇見了很多問題，記錄下來，供大家參考。column佈局時常會碰見label不能顯示或者控制元件顯示錯位等問題，導致這些問題的常見原因如下：

1.formPanel上的控制元件顯示不出來，控制元件的寬度太大，formpanel的寬度相對太小導致。

2.為FormPanel設定了defaultType屬性，沒有為每個控制元件單獨制定xtype屬性。正確的做法是不設定defaultType。

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

4.在新建TabPanel時，將其屬性layoutOnTabChange設定為true即可。（此方法不通用）

例項程式碼如下：

Ext.onReady(function(){ Ext.QuickTips.init(); // turn on validation errors beside the field globally Ext.form.Field.prototype.msgTarget = 'side'; var bd = Ext.getBody(); var detailForm = new Ext.FormPanel({ id:"detail", layout:"form", labelWidth: 60, labelAlign:"right", border:false, frame:true, width: 600,//寬度設定要合理，如果FormPanel的寬度小於控制元件的寬度，column佈局時控制元件不能正常顯示 height:400, // autoHeight:true, // defaultType: 'textfield',//column佈局時不能設定該屬性，否則不能正常顯示 items: [{//第一行 layout:"column", items:[{ columnWidth:.3,//第一列 layout:"form", items:[{ xtype:"textfield", fieldLabel: '合同編號', name: 'contractId', width:100 }] },{ columnWidth:.3,//第二列 layout:"form", items:[{ xtype:"textfield", fieldLabel: '合同名稱', name: 'contractId1', width:100 }] },{ columnWidth:.3,//第三列 layout:"form", items:[{ xtype:"textfield", fieldLabel: '合同', name: 'contractId2', width:100 }] }]},//第一行結束 {//第一行 layout:"column", items:[{ columnWidth:.3,//第一列 layout:"form", items:[{ xtype:"textfield", fieldLabel: '合同編號', name: 'contractId', width:100 }] },{ columnWidth:.3,//第二列 layout:"form", items:[{ xtype:"textfield", fieldLabel: '合同名稱', name: 'contractId1', width:100 }] },{ columnWidth:.3,//第三列 layout:"form", items:[{ xtype:"textfield", fieldLabel: '合同', name: 'contractId2', width:100 }] }]},//第一行結束 {//第一行 layout:"column", items:[{ columnWidth:.3,//第一列 layout:"form", items:[{ xtype:"textfield", fieldLabel: '合同編號', name: 'contractId', width:100 }] },{ columnWidth:.3,//第二列 layout:"form", items:[{ xtype:"textfield", fieldLabel: '合同名稱', name: 'contractId1', width:100 }] },{ columnWidth:.3,//第三列 layout:"form", items:[{ xtype:"textfield", fieldLabel: '合同', name: 'contractId2', width:100 }] }]}//第一行結束 ] }); var win = new Ext.Window( { id:"window", title: " 合同資訊 " , layout: 'border', width:600, height:500, closeAction:'hide', plain: true, items:[new Ext.TabPanel({ region: 'center', deferredRender: false, // layoutOnTabChange:true,//在TabPanel中採用column佈局時，有時需要設定該屬性 activeTab: 0, //活動的tab索引 items: [{ //contentEl: 'tab1', title: '合同明細', closable: false, //關閉項 autoScroll: false, //是否自動顯示滾動條 layout:'fit', collapsible: true, split:true, margins:'0 0 0 0', items:[detailForm] },{ //contentEl: 'tab2', title: '規格明細', closable: false, //關閉項 autoScroll: false, //是否自動顯示滾動條 layout:'fit', collapsible: true, split:true, margins:'0 0 0 0' }] })], buttons: [{ text:'Submit', disabled:true },{ text: 'Close', handler: function(){ win.hide(); // detailForm.destroy(); } }] }); //顯示視窗 win.show(); });