Extjs Column布局常見問題及解決方法
原文地址：http://blog.csdn.net/weoln/article/details/4339533 1.formPanel上的控件顯示不出來，控件的寬度太大，formpanel的寬度相對太小導致。
第一次用Extjs的column布局時遇見了很多問題，記錄下來，供大家參考。column布局時常會碰見label不能顯示或者控件顯示錯位等問題，導致這些問題的常見原因如下：</p>
2.為FormPanel設定了defaultType屬性，沒有為每個控件單獨制定xtype屬性。正確的做法是不設置defaultType。
3.在每個column里再加上form layout，再在form里加textfield。
4.在新建TabPanel時，將其屬性layoutOnTabChange設置為true即可。（此方法不通用）</span>
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();
});
</span></p> </span></span>
yaozuodaoforfly 
panda456 
chyx413332087 
openkk 