ExtJs FormPanel 表单布局

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