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

});