????? 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: '容