絕對布局（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的時候，顯示錯誤多半是使用了錯誤的布局造成的，因而，能熟練的使用布局是相當重要的。而要能熟練使用布局，最好的方式就是能了解各種布局在頁面中是如何實現的，并了解這些實現的特性，從而對布局了然于胸，這樣，就不怕用錯布局了。

在下文，將介紹面板。

請大家尊重作者的辛勤勞動，未經允許，請不要轉載本文，畢竟讀者的支持是作者撰寫文章的動力。

轉載于:https://www.cnblogs.com/hainange/p/6334122.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的谈谈Ext JS的组件——布局的使用方法续二的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。