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。