絕對布局讓我回憶到了使用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。預設情況下。面板的摺疊僅僅能通過單擊面板摺疊button來實現，假設希望單擊標題欄就實現摺疊，可在layout的配置物件中設定titlecollapse為true。
假設希望切換時顯示動畫。可設定animate為true。假設希望隱藏面板標題中的摺疊button。可設定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的元件 布局的使用方法續二
絕對布局讓我回想到了使用foxpro開發的時候，哪時候的介面布局就是這樣，通過設定控制項的左上角座標 x，y 和寬度來進行的，因為輸入控制項的 高度基本是固定的，所以不需要設定。在視覺化程式設計沒有出現之前，開發介面算是個苦差事，因為布局是需要花費不少功夫的，例如想要在已經定義好的元件中插入 乙個元...
談談Ext JS的元件 布局的使用方法續一
盒子布局主要作用是以水平 ext.layout.container.hbox 或垂直方式 ext.layout.container.vbox 來劃分容器區域。這也是比較常有的布局方式。使用盒子布局，除了要在容器定義layout配置項外，還需要在子元件指定子元件的寬度 hbox 或高度 vbox 指定...