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

自己以前总结的 写个博文以备不时之需。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。