Extjs之FormPanel布局

Love The Way You Lie 2021-09-14 11:04 363阅读 0赞

FormPanel有两种布局：**form**和**column**。  
form是纵向布局，column为横向布局。默认为后者。使用layout属性定义布局类型。对于一个复杂的布局表单，最重要的是正确分割，分割结果直接决定布局能否顺利实现。  
如果不再使用默认布局，那么我们必须为每一个元素指定一种布局方式，另外，还必须遵循以下几点：

1.  落实到任何一个表单组件后，最后总是form布局
2.  defaultType属性不一定起作用，必须显式为每一个表单组件指定xtype或new出新对象
3.  在column布局中，通过columnWidth可以指定列所占宽度的百分比，如占50%宽度为.5。  
    剖析出一个合理的结构，像下面这样 ：  
    ![这里写图片描述][3397965918852541387.jpg]

我们发现，布局其实是由行和列组件成，分成由左往右和由上往下两个方向，由左往右  
叫**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 : "重置"
             }]
          });
       });

[3397965918852541387.jpg]: http://img.ph.126.net/Z9MQ28CXPtt1pBkYsWCD9g==/3397965918852541387.jpg