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 : "重置"
???????? }]
????? });
?? });

?

總結

以上是生活随笔為你收集整理的ExtJs FormPanel布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。