在ext js中，包含兩類布局：元件類布局和容器類布局。由於有些元件是有不同的元件組合而成的，如字段就由標題和輸入框構成，他們之間也是存在布局關係的，而這 就需要元件類布局來處理元件內自己特有的布局關係。如果我們不定義自己的元件，基本不需要使用到元件布局，知道就行了。本文主要介紹的是容器類布局，因為 這個在開發中是必定會使用到的。
這個好理解， 就是有乙個放東西的盤子，你把東西放進去，東西原來是什麼樣子就是什麼樣子。如果盆子可以放大或縮小，盆子裡已有的東西也不會隨盆子的變化而變化。
這個布局是容器的預設布局。一般情況下，是不建議使用自動布局的，因為這個使用者體驗性太差了。大家只要知道有這樣一種布局就行了。
邊框布局是一種比較常用的布局，一般應用在介面的整體布局上。它最大的特色就是預設了南（south）、北（north）、東（east）、西（west）和中間（center）這5個區域，除了中間區域必須的外，其他的區域是可選的。在ext js 4.1及以後的版本中，除了中間區域是必須唯一的外，還可以放置任意多個（也可以為0個）相同的區域。下面通過一些示例來了解一下邊框布局。
下面的**將在乙個400×400的容器內建立乙個包含了5個區域、使用了預設配置的邊框布局檢視：
ext.create('ext.container.container',,,,
,]
});12345678910111213
容器渲染後可在頁面看到下圖所示的效果：
從**中可以看到，要使用邊框布局，要將容器的layout配置項定義為border，也可以使用以下定義方式：
layout:123各區域的設定，則需要在容器的子元件中通過region配置項來設定的，而區域的值就是東南西北中所對應的英文單詞。
如果乙個區域只有乙個子元件，那麼子元件的區域定義並沒有次序要求，如先定義北才能定義西這樣，只要定義好region配置項就行了。唯一要掌握的的規則是，中間區域必須有且是唯一的。
如果乙個區域有多個子元件，就要注意定義次序了，區域中先定義的子元件會顯示在前，後定義的顯示在後，如在區域北定義了兩個子元件，在items中，定義在前的會顯示在最頂部，而定義在後則會顯示在下面。
在上面示例的圖中，可以看到東西區域是包含在南北區域之間的，如果我想南北區域包含在東西區域之間要怎麼處理呢？這可通過設定區域的權重值來實現。各區域的預設權重值如下：
* north: 20,
* south: 10,
* center: 0,
* west: -10,
* east: -20
從預設權重值可以看到，權重大的會優先獲取容器空間，而權重小則只能等別的分完後再分。
修改區域的權重有兩種方式，一種是在定義layout配置項的時候，在layout的配置物件中使用regionweights配置項來定義，另一種是在子元件中使用weight配置項來定義。例如，如果希望南北區域放在東西區域之間，可以這樣定義：
layout:如果在乙個區域有多個子元件，而且希望乙個元件不在其他元件之間，而其中乙個元件在其他元件之間，就不能使用這種方式定義，就必須在子元件中使用weight配置項來定義了，例如在上面示例的items中新增以下**：},1234567
,1**中，內容為north2的北區子元件的權重為-30，因而它會在東西區域之間，最終的效果如下圖：
權重的設計讓邊框布局的設計更靈活了，可以說，目前流行的主介面布局，基本都可以使用邊框布局設計出來。
在我們常用的windows應用程式中，通過拆分條來改變兩個區域之間的大小是一種很常見的功能，如資源管理器中的導航區域和檔案列表區域，就可通 過拆分條來改變兩個區域之間的大小。在ext js中，這個功能當然是不能少的，而在邊框布局中，是通過功能元件ext.resizer.bordersplitter來實現，它的父類是 ext.resizer.splitter，而ext.resizer.splitter派生於ext.component。 ext.resizer.bordersplitter的作用是在區域之間渲染一條拆分條，並繫結滑鼠拖動事件，在滑鼠產生拖動事件的時候重新計算區域的 大小並調整拆分條的位置，從而模擬出拖動的效果。
要使用拆分條，只要在子元件的定義中新增split配置項就可以了，不過，拆分條不能應用於中間區域。個中原因很簡單，在中間區域有4條與 其他區域相連的邊，如果在中間區域定義拆分條，那到底是4條邊都渲染拆分條，還是只渲染其中一條？如果只渲染其中一條，應當渲染哪一條呢？在其他區域就沒 這個問題，只需渲染與中間區域相鄰的那條邊就行了。對於同區域有多個子元件的情況，該法則也是適用的。
一般來說，將split設定為true就可以使用拆分條。如果想更詳細的設定拆分條，可以使用配置物件來設定，如拆分條預設的背景顏色太挫了，我要用紅色作為它的背景色，可以這樣設定：
split: 123具體有哪些可用的拆分條的配置項，可以參閱ext.resizer.bordersplitter的api文件，因為這個拆分條就是該類的例項。如 果清楚知道ext.resizer.bordersplitter是乙個元件類，哪該類有什麼配置項可以用，心裡也就大概有數了，除了哪些私有的配置項需 要查閱api外，其餘的基本就是ext.component的配置項了。
未完待續……
談談Ext JS的元件 布局的使用方法續二
絕對布局讓我回想到了使用foxpro開發的時候，哪時候的介面布局就是這樣，通過設定控制項的左上角座標 x，y 和寬度來進行的，因為輸入控制項的 高度基本是固定的，所以不需要設定。在視覺化程式設計沒有出現之前，開發介面算是個苦差事，因為布局是需要花費不少功夫的，例如想要在已經定義好的元件中插入 乙個元...
談談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 指定...