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
}]
}]
}
]
}
]
});