Extjs Column布局常见问题及解决方法

1. 第一次用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();

});