Ext JS4学习课程+笔记（九）布局
日期：2014-05-16 浏览次数：20340 次
Ext JS4学习教程+笔记（九）布局
Ext JS4的常用布局，分为容器布局(Container Layout)和组件布局(Component Layout)
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
其中，容器布局有Auto, Anchor, Absolute, HBox, VBox, Accordion, Table, Column, Fit, Card, Border，
每种对应的layout属性改成首字母小写即可, 如auto, anchor, absolute, ... ...
(注意，Ext JS3里的Form Layout已被取消，意味着可以在表单面板上使用任何上面的布局，
在Ext JS4里，Ext.form.Panel的默认layout属性是'anchor'。)
在Ext JS4中，容器布局的类的关系如图（绿色的是推荐使用的布局类）：
各种容器布局，看了下图就很好理解了，其中Auto布局是不指定layout属性时的默认布局：
以上图形摘自《Ext JS 4 First Look》（2011年出版）一书，看图选布局比较直观（每个图的标题就是容器布局的名字），
这本书网上可以下载到电子版，大部分容器布局配置很方便，需要时查一下代码就行。
至于组件布局，是用于组织组件内部的HTML元素的，看Ext JS4的文档会发现，它们都是Ext.layout.component.Component的子类，并且都是私有(Private)的，
上面这本书介绍了Dock, Tool, Field, TriggerField四个组件布局，没有统一的属性设置方法，即对于组件没有专门的layout属性。
在每个Panel现在有一个dockedItems属性，可以放置toolbar，而toolbar有dock属性'top', 'bottom', 'right', 'left', 其内部实现机制就是Dock Layout，与Ext JS 3的实现相比，一个Panel上比如top位置上可以有两个或以上的toolbar。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
