Extjs4 常用布局总结

1.anchor 固定布局

子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小( width:500,height:300, )。一般与布局column一起使用。设置相对于父容器的百分比。

2.absolute 绝对布局 X/Y坐标定位

3.accordion 手风琴布局 类似于QQ面板的好友分组

4.border 边框布局 将容器分为 east south west north center 5部分

5.card 卡片布局 类似于tabpanel
card布局一次只能够显示一个面板
card布局提供方法让我们可以在一堆特定面板之间来回切换

6.table 表格布局 常用属性 columns colspan rowspan

7.column 列布局 常用属性 columns columnwidth （相比较table而言有点类似 但是column布局无法调整 每个控件之间的间隔，只能采用样式来处理 sample：style:"margin-left:10px;margin-right:10px;",）

8.fit 布局
子元素将自动填满整个父容器（对元素设置宽度无效），如果容器组件中有多个子元素，则只会显示第一个子元素。

9.form 表单布局
FormPanel有两种布局：form和column，form是纵向布局，column为横向布局。默认为后者。使用layout属性定义布局类型。对于一个复杂的布局表单，最重要的是正确分割，分割结果直接决定布局能否顺利实现。
如果不再使用默认布局，那么我们必须为每一个元素指定一种布局方式，另外，还必须遵循以下几点：
【1】落实到任何一个表单组件后，最后总是form布局
【2】defaultType属性不一定起作用，必须显式为每一个表单组件指定xtype或new出新对象
【3】在column布局中，通过columnWidth可以指定列所占宽度的百分比，如占50%宽度为.5。

以上是extjs的几种常用布局 实际开发经常要将几种布局混合使用进行页面布局 这就要求我们必须熟练掌握每种布局的特点。

网上其他相关总结链接：
http://my.oschina.net/u/1398304/blog/291341 http://www.myexception.cn/javascript/2018318.html http://www.iteye.com/topic/1135763 http://www.cnblogs.com/knowledgesea/archive/2013/08/28/3286661.html http://wenku.baidu.com/link?url=6rNzED6IFoCOipxJLizPIamjR-R8d0iRNvJeWfR99nopeLrVRpdWIIIokF2Bi1LoR1e1VYVit_ZBuJvr-tJ2fPVfV--PyPJT1cDUV6eFYbW
自己以前总结的 写个博文以备不时之需。