正文
Extjs Column布局常见问题及解决方法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
原文地址：http://blog.csdn.net/weoln/article/details/4339533
第一次用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();
});
