ExtJs Form布局

FormPanel有两种布局:form和column,form是纵向布局,column为横向布局。默认为后者。使用layout属性定义布局类型。对于一个复杂的布局表单,最重要的是正确分割,分割结果直接决定布局能否顺利实现。
如果不再使用默认布局,那么我们必须为每一个元素指定一种布局方式,另外,还必须遵循以下几点:

【1】落实到任何一个表单组件后,最后总是form布局

【2】defaultType属性不一定起作用,必须显式为每一个表单组件指定xtype或new出新对象

【3】在column布局中,通过columnWidth可以指定列所占宽度的百分比,如占50%宽度为.5。

整个大的表单是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: [{}]
}]
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值