第一次用Extjs的column布局时遇见了很多问题，记录下来，供大家参考。column布局时常会碰见label不能显示或者控件显示错位等问题，导致这些问题的常见原因如下：

1.formPanel上的控件显示不出来，控件的宽度太大，formpanel的宽度相对太小导致。

2.为FormPanel设定了defaultType属性，没有为每个控件单独制定xtype属性。正确的做法是不设置defaultType。

3.在每个column里再加上form layout，再在form里加textfield。

4.在新建TabPanel时，将其属性layoutOnTabChange设置为true即可。（此方法不通用）

 

实例代码如下：

 
  
  1. Ext.onReady(function(){ 
  2.  
  3.      
  4.             Ext.QuickTips.init(); 
  5.  
  6.     // turn on validation errors beside the field globally 
  7.     Ext.form.Field.prototype.msgTarget = 'side'; 
  8.  
  9.     var bd = Ext.getBody(); 
  10.  
  11. var detailForm = new Ext.FormPanel({ 
  12.         id:"detail", 
  13.         layout:"form", 
  14.         labelWidth: 60, 
  15.         labelAlign:"right", 
  16.         border:false, 
  17.         frame:true, 
  18.         width: 600,//宽度设置要合理，如果FormPanel的宽度小于控件的宽度，column布局时控件不能正常显示 
  19.         height:400, 
  20. //      autoHeight:true, 
  21. //      defaultType: 'textfield',//column布局时不能设置该属性，否则不能正常显示 
  22.         items: [{//第一行 
  23.             layout:"column", 
  24.             items:[{ 
  25.                 columnWidth:.3,//第一列 
  26.                 layout:"form", 
  27.                 items:[{ 
  28.                     xtype:"textfield", 
  29.                     fieldLabel: '合同编号', 
  30.                     name: 'contractId', 
  31.                     width:100 
  32.                     }] 
  33.             },{ 
  34.                 columnWidth:.3,//第二列 
  35.                 layout:"form", 
  36.                 items:[{ 
  37.                     xtype:"textfield", 
  38.                     fieldLabel: '合同名称', 
  39.                     name: 'contractId1', 
  40.                     width:100 
  41.                     }] 
  42.             },{ 
  43.                 columnWidth:.3,//第三列 
  44.                 layout:"form", 
  45.                 items:[{ 
  46.                     xtype:"textfield", 
  47.                     fieldLabel: '合同', 
  48.                     name: 'contractId2', 
  49.                     width:100 
  50.                     }] 
  51.             }]},//第一行结束 
  52.             {//第一行 
  53.             layout:"column", 
  54.             items:[{ 
  55.                 columnWidth:.3,//第一列 
  56.                 layout:"form", 
  57.                 items:[{ 
  58.                     xtype:"textfield", 
  59.                     fieldLabel: '合同编号', 
  60.                     name: 'contractId', 
  61.                     width:100 
  62.                     }] 
  63.             },{ 
  64.                 columnWidth:.3,//第二列 
  65.                 layout:"form", 
  66.                 items:[{ 
  67.                     xtype:"textfield", 
  68.                     fieldLabel: '合同名称', 
  69.                     name: 'contractId1', 
  70.                     width:100 
  71.                     }] 
  72.             },{ 
  73.                 columnWidth:.3,//第三列 
  74.                 layout:"form", 
  75.                 items:[{ 
  76.                     xtype:"textfield", 
  77.                     fieldLabel: '合同', 
  78.                     name: 'contractId2', 
  79.                     width:100 
  80.                     }] 
  81.             }]},//第一行结束 
  82.             {//第一行 
  83.             layout:"column", 
  84.             items:[{ 
  85.                 columnWidth:.3,//第一列 
  86.                 layout:"form", 
  87.                 items:[{ 
  88.                     xtype:"textfield", 
  89.                     fieldLabel: '合同编号', 
  90.                     name: 'contractId', 
  91.                     width:100 
  92.                     }] 
  93.             },{ 
  94.                 columnWidth:.3,//第二列 
  95.                 layout:"form", 
  96.                 items:[{ 
  97.                     xtype:"textfield", 
  98.                     fieldLabel: '合同名称', 
  99.                     name: 'contractId1', 
  100.                     width:100 
  101.                     }] 
  102.             },{ 
  103.                 columnWidth:.3,//第三列 
  104.                 layout:"form", 
  105.                 items:[{ 
  106.                     xtype:"textfield", 
  107.                     fieldLabel: '合同', 
  108.                     name: 'contractId2', 
  109.                     width:100 
  110.                     }] 
  111.             }]}//第一行结束 
  112.            ] 
  113.       });  
  114.  
  115.  
  116.  
  117. var win =  new  Ext.Window( 
  118.                { 
  119.                 id:"window", 
  120.                 title: " 合同信息 " , 
  121.                 layout: 'border', 
  122.                 width:600, 
  123.                 height:500, 
  124.                 closeAction:'hide', 
  125.                 plain: true, 
  126.                  
  127.                 items:[new Ext.TabPanel({ 
  128.                         region: 'center', 
  129.                         deferredRender: false, 
  130. //                      layoutOnTabChange:true,//在TabPanel中采用column布局时，有时需要设置该属性 
  131.                         activeTab: 0, //活动的tab索引 
  132.                         items: [{ 
  133.                             //contentEl: 'tab1', 
  134.                             title: '合同明细', 
  135.                             closable: false, //关闭项 
  136.                             autoScroll: false, //是否自动显示滚动条 
  137.                             layout:'fit', 
  138.                             collapsible: true, 
  139.                             split:true, 
  140.                             margins:'0 0 0 0', 
  141.                             items:[detailForm] 
  142.                         },{ 
  143.                             //contentEl: 'tab2', 
  144.                             title: '规格明细', 
  145.                             closable: false, //关闭项 
  146.                             autoScroll: false, //是否自动显示滚动条 
  147.                             layout:'fit', 
  148.                             collapsible: true, 
  149.                             split:true, 
  150.                             margins:'0 0 0 0' 
  151.                         }] 
  152.                     })], 
  153.                  
  154.                 buttons: [{ 
  155.                     text:'Submit', 
  156.                     disabled:true 
  157.                 },{ 
  158.                     text: 'Close', 
  159.                     handler: function(){ 
  160.                         win.hide(); 
  161.                        // detailForm.destroy(); 
  162.                     } 
  163.                 }] 
  164.  
  165.       });     
  166.     
  167.     //显示窗口 
  168.     win.show(); 
  169.  
  170. });