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