絕對布局讓我回想到了使用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個像 素。如果你使用正值，那子元件的顯示就會超出容器，一般絕少這樣設定。最後一種方式就是混合以上兩種方式的方式，也就是寬度用百分比，高度使用偏移量，或 寬度使用偏移量，而高度使用百分比。如果子元件的高度是固定的，以上三種方式也可只設定乙個值，也就是只設定子元件的寬度。
錨布局是表單面板的預設模板，因而是一種常有的布局，它的好處就是子元件可根據容器尺寸的變化而調整。在表單面板中使用anchor布局，就可避免在表單面板變小後，輸入元件的長度會超出表單面板的訪問，而變大的時候則不會留下一片空白。
要使用錨布局，除了要在容器中將layout定義為「anchor」，還需要在子元件中使用anchor配置項來定義子元件的高度和寬度。配置項anchor的使用方法與絕對布局中的anchor配置項的使用方法是一樣的，這裡就不再贅述了。
在ext js 2沒有水平盒子布局的時候，只能使用列布局進行列的劃分，自從有了水平盒子布局，就很少使用列布局了。不過，鹹魚白菜各有喜好，能實現所需效果才是最終目的。
要使用列布局，除了要在容器中將layout定義為「column」，還需要在子元件中定義寬度。寬度的定義方式有兩種，一是直接使用width來 定義，這種方式不要的地方是寬度固定，不能隨容器的變化而進行調整；第二張方式是使用columnwidth，通過設定百分比（值用小數來表示）來設定列 寬，這種方式的好處就是列寬可隨容器大小的變化調整列寬。
手風琴也是一種常有的布局。它派生於垂直盒子布局，在原理上其實也差不多，把容器垂直劃分為幾個區域，只有乙個區域是展開來顯示標題和內容的，其他 區域都是摺疊只顯示標題的。當然，手風琴布局也可以同時顯示多個展開區域，這個要在layout的配置物件中將multi配置項設定為true。
由於手風琴布局需要顯示標題，而它自己不會去建立乙個這樣的標題，只使用容器類的標題，因而，在使用手風琴布局的時候，子元件必須選擇是帶有標題且能摺疊的容器類，如面板、表單面板、樹面板等。
使用手風琴布局，只需要在容器中將layout定義為「accordion」就行了。如果喜歡活動面板始終位於容器定義，可在layout的配置對 象中設定activeontop為true。預設情況下，面板的摺疊只能通過單擊面板摺疊按鈕來實現，如果希望單擊標題欄就實現摺疊，可在layout的 配置物件中設定titlecollapse為true。如果希望切換時顯示動畫，可設定animate為true。如果希望隱藏面板標題中的摺疊按鈕，可 設定hidecollapsetool為true，這時候，titlecollapse會被自動設定未true。
表單布局與錨布局有點類似，都允許子元件隨容器尺寸的變化而調整子元件的大小，不過這只限於輸入字段，因而一般只用於只有輸入欄位的容器。它與錨布局的不同之處在於不需要在子元件定義anchor配置項。
對於輸入字段來說，表單布局與錨布局的實現方式是一樣的。他們都是通過樣式來實現效果的，在輸入欄位的封裝div中，使用了樣式「display: table;」，也就是說該div的行為與html**的行為是一樣的，而對於輸入欄位的標籤和輸入框，使用的樣式是「display: table-cell;」，也就相當於把輸入欄位的封裝div劃分成了**的兩列。其中一列顯示標籤，另一列顯示輸入框。由於**會自動跟隨父容器的尺寸 變化而調整自身的尺寸，這也就實現了子元件跟隨容器尺寸的變化而自動做相應的調整。表單布局與錨布局的不同在於表單布局不會去計算輸入欄位的封裝div的 寬度，直接設定未100%，而錨布局會根據設定去計算封裝div的寬度和高度。而這也是錨布局內可使用任何子元件，而表單布局內只能使用輸入欄位的乙個原 因，因為錨布局可根據設定去計算子元件的寬度和高度，而表單布局則不會。如果在表單布局內使用非輸入欄位類的元件，由於沒有計算過程，就等於使用了自動布 局，子元件的尺寸預設是多少就是多少了，不會去做調整，而輸入字段自身的**特性不需要這樣的計算就能正確。
使用表單布局，只需要在容器中將layout定義為「form」就行了。使用labelwidth可設定輸入欄位的標籤的寬度。
**布局是使用table元素實現的布局，因而，一般情況，其他布局能實現的效果，就不要建議使用該布局。
使用**布局，除了要將布局型別定義為table，還需要使用columns來定義**的列數。要定義**的屬性，可使用tableattrs配置項；要定義行的屬性，可使用trattrs配置項；要定義單元格的屬性，可使用tdattrs配置項。
如果沒有特別說明，容器會依子元件的定義次序將子元件寫入**第乙個中，如定義了2列，3個子元件，則第乙個子元件會渲染在**的第一行第一列，而 第二子元件會渲染在第一行第二列，第三個子元件會渲染在第二行第一列。如果要實現跨列，則可在子元件中使用colspan配置項來宣告跨幾列，要跨行，則 使用rowspan配置項。要定義單元格的id，可使用cellid配置項。要定義單元格的樣式，可使用cellcls配置項。
在使用ext js的時候，顯示錯誤多半是使用了錯誤的布局造成的，因而，能熟練的使用布局是相當重要的。而要能熟練使用布局，最好的方式就是能了解各種布局在頁面中是如何實現的，並了解這些實現的特性，從而對布局了然於胸，這樣，就不怕用錯布局了。
在下文，將介紹面板。
談談Ext JS的元件 布局的使用方法
在ext js中，包含兩類布局 元件類布局和容器類布局。由於有些元件是有不同的元件組合而成的，如字段就由標題和輸入框構成，他們之間也是存在布局關係的，而這 就需要元件類布局來處理元件內自己特有的布局關係。如果我們不定義自己的元件，基本不需要使用到元件布局，知道就行了。本文主要介紹的是容器類布局，因為...
談談Ext JS的元件 布局的使用方法續一
盒子布局主要作用是以水平 ext.layout.container.hbox 或垂直方式 ext.layout.container.vbox 來劃分容器區域。這也是比較常有的布局方式。使用盒子布局，除了要在容器定義layout配置項外，還需要在子元件指定子元件的寬度 hbox 或高度 vbox 指定...
談談Ext JS的元件 布局的使用方法續一
盒子布局主要作用是以水平 ext.layout.container.hbox 或垂直方式 ext.layout.container.vbox 來劃分容器區域。這也是比較常有的布局方式。使用盒子布局，除了要在容器定義layout配置項外，還需要在子元件指定子元件的寬度 hbox 或高度 vbox 指定...