ExtJs FormPanel布局

FormPanel有兩種布局：form和column，form是縱向布局，column為橫向布局。默認為后者。使用layout屬性定義布局類型。對於一個復雜的布局表單，最重要的是正確分割，分割結果直接決定布局能否順利實現。
如果不再使用默認布局，那么我們必須為每一個元素指定一種布局方式，另外，還必須遵循以下幾點：
【1】落實到任何一個表單組件后，最后總是form布局
【2】defaultType屬性不一定起作用，必須顯式為每一個表單組件指定xtype或new出新對象
【3】在column布局中，通過columnWidth可以指定列所占寬度的百分比，如占50%寬度為.5。

剖析出一個合理的結構，像下面這樣 ：

我們發現，布局其實是由行和列組件成，分成由左往右和由上往下兩個方向，由左往右
叫column，由上往下叫form。 
整個大的表單是form布局，從上往下放置了五個小布局，在這里我以行n標記，我們
以行1為例進行分析。行1從左往右有三個表單組件，所以是column布局，行1我們用結
構這樣定義： 
{ 
layout: “column”, 
items:[{},{},{}] //items表示指定布局內的表單組件集合，在此有三個 
}

行1內其實還有三個form布局，因為每個布局中只有一個表單組件，所以看起來並不
那么明顯，我們完全可以放置多個表單組件到布局中。每一個布局使用下面的結構定義： 
{ 
layout: “form”, 
items:[{}] //只有一個表單組件 
}

上面的兩個結構最終要組裝到一起： 
{ 
layout: “column”, 
items:[{ 
   layout: “form”, 
   items:[{}] 
},{ 
   layout: “form”, 
   items: [{}] 
},{ 
   layout: “form”, 
   items: [{}] 
}] 
}

 

實現上面的完整代碼是：

Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
       title : "靈活布局的表單",
       width : 650,
       autoHeight : true,
       frame : true,
       renderTo : "a",
       layout : "form", // 整個大的表單是form布局
       labelWidth : 65,
       labelAlign : "right",

       items : [{ // 行1
        layout : "column", // 從左往右的布局
        items : [{
           columnWidth : .3, // 該列有整行中所占百分比
           layout : "form", // 從上往下的布局
           items : [{
              xtype : "textfield",
              fieldLabel : "姓",
              width : 120
             }]
          }, {
           columnWidth : .3,
           layout : "form",
           items : [{
              xtype : "textfield",
              fieldLabel : "名",
              width : 120
             }]
          }, {
           columnWidth : .3,
           layout : "form",
           items : [{
              xtype : "textfield",
              fieldLabel : "英文名",
              width : 120
             }]
          }]
       }, { // 行2
          layout : "column",
          items : [{
             columnWidth : .5,
             layout : "form",
             items : [{
                xtype : "textfield",
                fieldLabel : "座右銘1",
                width : 220
               }]
            }, {
             columnWidth : .5,
             layout : "form",
             items : [{
                xtype : "textfield",
                fieldLabel : "座右銘2",
                width : 220
               }]
            }]
         }, {// 行3
          layout : "form",
          items : [{
             xtype : "textfield",
             fieldLabel : "獎勵",
             width : 500
            }, {
             xtype : "textfield",
             fieldLabel : "處罰",
             width : 500
            }]
         }, {// 行4
          layout : "column",
          items : [{
             layout : "form",
             columnWidth : 0.2,
             items : [{
                xtype : "textfield",
                fieldLabel : "電影最愛",
                width : 50
               }]
            }, {
             layout : "form",
             columnWidth : 0.2,
             items : [{
                xtype : "textfield",
                fieldLabel : "音樂最愛",
                width : 50
               }]
            }, {
             layout : "form",
             columnWidth : 0.2,
             items : [{
                xtype : "textfield",
                fieldLabel : "明星最愛",
                width : 50
               }]
            }, {
             layout : "form",
             columnWidth : 0.2,
             items : [{
                xtype : "textfield",
                fieldLabel : "運動最愛",
                width : 50
               }]
            }]
         }, {// 行5
          layout : "form",
          items : [{
             xtype : "htmleditor",
             fieldLabel : "獲獎文章",
             enableLists : false,
             enableSourceEdit : false,
             height : 150
            }]
         }],
       buttonAlign : "center",
       buttons : [{
          text : "提交"
         }, {
          text : "重置"
         }]
      });
   });