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