Extjs4 常用布局总结

Posted 2020-08-06

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

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

  

本文出自 “橡树” 博客，转载请与作者联系！