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

第一次用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(); });