formpanel布局的学习

时间:2024-12-08 15:05:38

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

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

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

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

剖析出一个合理的结构,像下面这样 

formpanel布局的学习

我们发现,布局其实是由行和列组件成,分成由左往右和由上往下两个方向,由左往右 叫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: [{}]  }]  }

【以上文章转载自:http://hi.baidu.com/bactryki/item/1ad380288f2ec44c479962bf

另外还有一些在开发过程中遇到的问题:

【1】表单的label和表单组件不在同一行。

解决办法:FormPanel配置项加 labelAlign: "left", 

【2】表单按钮始终居右。

解决办法:FormPanel配置项加 buttonAlign: "left",