談談Ext JS的組件——佈局的使用方法續二

絕對佈局（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的時候，顯示錯誤多半是使用了錯誤的佈局形成的，於是，能熟練的使用佈局是至關重要的。而要能熟練使用佈局，最好的方式就是能瞭解各類佈局在頁面中是如何實現的，並瞭解這些實現的特性，從而對佈局瞭然於胸，這樣，就不怕用錯佈局了。

在下文，將介紹面板。

請你們尊重做者的辛勤勞動，未經容許，請不要轉載本文，畢竟讀者的支持是做者撰寫文章的動力。