Extjs Form表格容器的使用

FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel,

只是自动创建了一个 BasicForm 来管理所有添加到 Panel中的 Ext.form.field.Field 对象.

可以快捷方便地进行 配置以及处理 BasicForm 和 表单域.

在Extjs Form中，默认的布局方式是layout: 'anchor'

默认每行只显示一个控件，如果我们要在一行中显示多个，

需要将这些控件放在一个container中(指定xtype : "container")，并设置container的layout为hbox

xtype : "form",

autoScroll : true,

// 表单域 Fields 将被竖直排列, 占满整个宽度

layout: 'anchor',

//

defaults: {

anchor: '100%'

},

bodyPadding : 5,

defaultType : 'textfield',

fieldDefaults : {

labelAlign : "right",

labelSeparator : "",

msgTarget : 'side',

margin : "5"

},

items : [{

xtype : "hidden",

id : "shipping_id",

name : "shipping_id",

value : entity == null ? null : entity.get("id"),

},

{

xtype : "container",

layout : "hbox",

items : [

//添加的元素将会在同一行显示

]

}

]

如果form表格中已经固定了两列进行展示,则可以按如下设置layout

layout : {

type : "table",

columns : 2

},

如果需要合并某一行,可以使用以下属性(在items中的某一项中使用))

width : 490,

colspan : 2

比如:

items : [{

xtype : "hidden",

id : "shipping_id",

name : "shipping_id",

value : entity == null ? null : entity.get("id"),

width : 490,

colspan : 2

},

{

xtype : "container",

layout : "hbox",

items : [

//添加的元素将会在同一行显示

]

}

]