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。