絕對佈局（Ext.layout.container.Absolute）
絕對佈局讓我回想到了使用Foxpro開發的時候，哪時候的界面佈局就是這樣，通過設置控件的左上角座標（x，y）和寬度來進行的，因爲輸入控件的 高度基本是固定的，所以不需要設置。在可視化編程沒有出現之前，開發界面算是個苦差事，因爲佈局是需要花費不少功夫的，例如想要在已經定義好的組件中插入 一個組件，那就得重新修改插入位置以下的組件的座標，這工作是比較枯燥無聊的，因而，在沒必要的情況下，還是少選擇這種佈局模式。
絕對佈局是使用CSS的絕對定位（absolute）實現的，因而在使用的時候需要定義子組件的左上角座標、寬度和高度。在CSS中，絕對定義是使 用left和top來定義左上角座標的，而在Ext JS中，則轉換爲習慣的x、y來代替。寬度和高度可以分別使用width和height來定義，也可以是anchor來定義。使用anchor的好處是子 組件會根據容器的尺寸變化來調整子組件的尺寸，從而保證不會在容器變小的時候，只能顯示部分子組件，而在容器大了的時候，顯示一片的空白區域。
使用anchor來定義寬度和高度也有三種方式，一種是使用百分比來定義，如“90% 95%”，這裏表示的是子組件的寬度是容器寬度的90%，高度爲容器高度的95%，一種是使用偏移量，如“-20 -5”,這裏表示的是子組件的右邊界將便宜容器的右邊界-20像素，也就是兩個邊界相距20個像素，而-5則表示子組件的底部邊界與容器的邊界相距5個像 素。如果你使用正值，那子組件的顯示就會超出容器，一般絕少這樣設置。最後一種方式就是混合以上兩種方式的方式，也就是寬度用百分比，高度使用偏移量，或 寬度使用偏移量，而高度使用百分比。如果子組件的高度是固定的，以上三種方式也可只設置一個值，也就是隻設置子組件的寬度。
錨佈局（Ext.layout.container.Anchor）
錨佈局是表單面板的默認模板，因而是一種常有的佈局，它的好處就是子組件可根據容器尺寸的變化而調整。在表單面板中使用anchor佈局，就可避免在表單面板變小後，輸入組件的長度會超出表單面板的訪問，而變大的時候則不會留下一片空白。
要使用錨佈局，除了要在容器中將layout定義爲“anchor”，還需要在子組件中使用anchor配置項來定義子組件的高度和寬度。配置項anchor的使用方法與絕對佈局中的anchor配置項的使用方法是一樣的，這裏就不再贅述了。
列布局（Ext.layout.container.Column）
在Ext JS 2沒有水平盒子佈局的時候，只能使用列布局進行列的劃分，自從有了水平盒子佈局，就很少使用列布局了。不過，鹹魚白菜各有喜好，能實現所需效果纔是最終目的。
要使用列布局，除了要在容器中將layout定義爲“column”，還需要在子組件中定義寬度。寬度的定義方式有兩種，一是直接使用width來 定義，這種方式不要的地方是寬度固定，不能隨容器的變化而進行調整；第二張方式是使用columnWidth，通過設置百分比（值用小數來表示）來設置列 寬，這種方式的好處就是列寬可隨容器大小的變化調整列寬。
手風琴佈局（Ext.layout.container.Accordion）
手風琴也是一種常有的佈局。它派生於垂直盒子佈局，在原理上其實也差不多，把容器垂直劃分爲幾個區域，只有一個區域是展開來顯示標題和內容的，其他 區域都是摺疊只顯示標題的。當然，手風琴佈局也可以同時顯示多個展開區域，這個要在layout的配置對象中將multi配置項設置爲true。
由於手風琴佈局需要顯示標題，而它自己不會去創建一個這樣的標題，只使用容器類的標題，因而，在使用手風琴佈局的時候，子組件必須選擇是帶有標題且能摺疊的容器類，如面板、表單面板、樹面板等。
使用手風琴佈局，只需要在容器中將layout定義爲“accordion”就行了。如果喜歡活動面板始終位於容器定義，可在layout的配置對 象中設置activeOnTop爲true。默認情況下，面板的摺疊只能通過單擊面板摺疊按鈕來實現，如果希望單擊標題欄就實現摺疊，可在layout的 配置對象中設置titleCollapse爲true。如果希望切換時顯示動畫，可設置animate爲true。如果希望隱藏面板標題中的摺疊按鈕，可 設置hideCollapseTool爲true，這時候，titleCollapse會被自動設置未true。
表單佈局（Ext.layout.container.Form）
表單佈局與錨佈局有點類似，都允許子組件隨容器尺寸的變化而調整子組件的大小，不過這只限於輸入字段，因而一般只用於只有輸入字段的容器。它與錨佈局的不同之處在於不需要在子組件定義anchor配置項。
對於輸入字段來說，表單佈局與錨佈局的實現方式是一樣的。他們都是通過樣式來實現效果的，在輸入字段的封裝DIV中，使用了樣式“display: table;”，也就是說該DIV的行爲與HTML表格的行爲是一樣的，而對於輸入字段的標籤和輸入框，使用的樣式是“display: table-cell;”，也就相當於把輸入字段的封裝DIV劃分成了表格的兩列。其中一列顯示標籤，另一列顯示輸入框。由於表格會自動跟隨父容器的尺寸 變化而調整自身的尺寸，這也就實現了子組件跟隨容器尺寸的變化而自動做相應的調整。表單佈局與錨佈局的不同在於表單佈局不會去計算輸入字段的封裝DIV的 寬度，直接設置未100%，而錨佈局會根據設置去計算封裝DIV的寬度和高度。而這也是錨佈局內可使用任何子組件，而表單佈局內只能使用輸入字段的一個原 因，因爲錨佈局可根據設置去計算子組件的寬度和高度，而表單佈局則不會。如果在表單佈局內使用非輸入字段類的組件，由於沒有計算過程，就等於使用了自動布 局，子組件的尺寸默認是多少就是多少了，不會去做調整，而輸入字段自身的表格特性不需要這樣的計算就能正確。
使用表單佈局，只需要在容器中將layout定義爲“form”就行了。使用labelWidth可設置輸入字段的標籤的寬度。
表格佈局（Ext.layout.container.Table）
表格佈局是使用TABLE元素實現的佈局，因而，一般情況，其他佈局能實現的效果，就不要建議使用該佈局。
使用表格佈局，除了要將佈局類型定義爲table，還需要使用columns來定義表格的列數。要定義表格的屬性，可使用tableAttrs配置項；要定義行的屬性，可使用trAttrs配置項；要定義單元格的屬性，可使用tdAttrs配置項。
如果沒有特別說明，容器會依子組件的定義次序將子組件寫入表格第一個中，如定義了2列，3個子組件，則第一個子組件會渲染在表格的第一行第一列，而 第二子組件會渲染在第一行第二列，第三個子組件會渲染在第二行第一列。如果要實現跨列，則可在子組件中使用colspan配置項來聲明跨幾列，要跨行，則 使用rowspan配置項。要定義單元格的id，可使用cellId配置項。要定義單元格的樣式，可使用cellCls配置項。
小結
在使用Ext JS的時候，顯示錯誤多半是使用了錯誤的佈局造成的，因而，能熟練的使用佈局是相當重要的。而要能熟練使用佈局，最好的方式就是能瞭解各種佈局在頁面中是如何實現的，並瞭解這些實現的特性，從而對佈局瞭然於胸，這樣，就不怕用錯佈局了。
在下文，將介紹面板。
請大家尊重作者的辛勤勞動，未經允許，請不要轉載本文，畢竟讀者的支持是作者撰寫文章的動力