Extjs 表单列布局

      Extjs 做Formpanel表单时会经常使用column列布局，虽然经常用，但还是经常忘，特此记录。

      效果图：

       

                  

 

           

 

 

        代码：

                var form_Task = new Ext.form.FormPanel({
        id: 'form_systemconfig',
  frame:true,
        bodyStyle: 'padding:0 10 0 10',
        labelAlign: 'left',
                                 layout : "form",        keys: [{
            key: [10, 13],
            fn: summitTaskForm
        }
            ],
  width:800,
       autoHeight : true,
        items: [{
            xtype: 'fieldset',
            autoHeight: true,
    border: false,
            items: [
   {//第1行
        layout : "column",
         bodyStyle: 'padding:10 0 0 0',
          id:"fourRow",
        items : [{
        layout : "form",
        columnWidth : 0.5,
        labelWidth:80,
        items : [{
        xtype: 'textfield',
        fieldLabel: '业务系统名称',
        id: 'BUSINESSSYSNAME',
                                width: 260        
          }]
       }, {
        layout : "form",
        columnWidth : 0.5,
        labelWidth:80,
        items : [{
         xtype: 'textfield',
         fieldLabel: '系统英文名',
         id: 'SYSTEMENGLISHNMAE',
         width: 270
        }]
       }]
    },
   {//第2行
        layout : "column",
         id:"fiveRow",
        items : [{
        layout : "form",
        columnWidth : 0.5,
        labelWidth:80,
        items : [{
        xtype: 'textfield',
        fieldLabel: '系统影响度',
        id: 'SYSTEMAFFECT',
                                width: 260        
          }]
       }, {
        layout : "form",
        columnWidth : 0.5,
        labelWidth:80,
        items : [{
         xtype: 'textfield',
         fieldLabel: '业务窗口',
         id: 'BUSINESSWINDOW',
         width: 270
        }]
       }]
    },{//第3行
        layout : "column",
        id:"sixRow",
        items : [{
        layout : "form",
        columnWidth : 0.5,
        labelWidth:80,
        items : [{
        xtype: 'textfield',
        fieldLabel: '可用容量需求',
        id: 'AVIABLEBUDAGE',
                                width: 260        
          }]
       }, {
        layout : "form",
        columnWidth : 0.5,
        labelWidth:80,
        items : [{
         xtype: 'textfield',
         fieldLabel: '异地容灾需求',
         id: 'DISASTERRECOVERY',
         width: 270
        }]
       }]
    },{//第4行
        layout : "column",
        id:"sevenRow",
        items : [{
        layout : "form",
        columnWidth : 0.5,
        labelWidth:80,
        items : [{
        //xtype: 'textfield',
        fieldLabel: '要求到位时间',
        id: 'REQUIREMENTTIME',
         xtype: "datefield",
        format:"Y-m-d",
        allowBlank: false,
        editable:false,
                                width: 260        
          }]
       }, {
        layout : "form",
        columnWidth : 0.5,
        labelWidth:80,
        items : [{
         xtype: 'textfield',
         fieldLabel: '存储计算公式',
         id: 'STORAGEFORMATE',
         width: 270
        }]
       }]
    },
    {//第5行
        layout : "column",
        id:"eightRow",
        items : [{
        layout : "form",
        columnWidth : 0.4,
        labelWidth:80,
        items : [{
        xtype: 'textfield',
        fieldLabel: '容量类型',
        id: 'STORAGETYPE',
        enableKeyEvents:true,
                                width: 150        
          }]
       }, {
        layout : "form",
        columnWidth : 0.3,
        labelWidth:50,
        items : [{
         xtype: 'textfield',
         fieldLabel: '容量',
         id: 'CAPACITY',
         width: 150
        }]
       },{
        layout : "form",
        columnWidth : 0.3,
        labelWidth:50,
        items : [{
         xtype: 'textfield',
         fieldLabel: '状态',
         id: 'STATE',
         width: 150
        }]
       }]
    }
   
            ]
        }
        ]
    });