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();

});