盒子布局主要作用是以水平（ext.layout.container.hbox）或垂直方式（ext.layout.container.vbox）來劃分容器區域。這也是比較常有的布局方式。
使用盒子布局，除了要在容器定義layout配置項外，還需要在子元件指定子元件的寬度（hbox）或高度（vbox）。指定寬度或高度有兩種方 式，一是直接使用width或height來定義，一是使用flex配置項，根據比例來劃分。下面通過一些示例來了解一下盒子布局的使用，這裡只使用水平 盒子作為示例，垂直盒子就不演示了。
在頁面執行以下**建立乙個400×200的容器，然後使用水平盒子布局加入三個大小分別為50×50、100×100和150×150的面板：
ext.create('ext.container.container',,
layout:,
defaults:
},items:[,,
]});1234567891011121314151617181920212223
為了加強演示效果，特意將容器的邊框設定為5畫素，且以***實線顯示，而面板的邊框也使用紅色實線來顯示，最終的顯示效果如下：
從效果圖中可以看到，由於子元件的總寬度不能填滿容器的寬度， 因而留了很大一塊空白，要預防這種情況，就要使用flex配置項，例如，將150×150的面板的「width:150」修改為「flex:1」就可以讓 子元件填滿餘下的空白了。修改後的寬度計算規則是先用容器的寬度減去所有固定寬度的子元件的總寬度，再把餘下的寬度根據flex設定的比例分配，由於這裡 只有乙個flex，因而會把全部餘下寬度全部分配給150×150的面板。
如果不清楚該設定多少寬度給子元件，最好的方式就是使用flex，通過比例劃分的方式來分配寬度。比例劃分的計算規則是，先把所以子元件的flex 配置項相加作為分母，把各子元件的flex設定作為分子，計算出比例後再乘於容器的寬度就是子元件的寬度。例如，將示例中的三個子元件的flex依次設定 為1、2、4，那各子元件的寬度將依次為總寬度的1/7、2/7和4/7。使用除法，不可避免的要對計算值進行取整，這樣，取整後的總寬度就有可能不是容 器的總寬度，因而，在最後都會調整最後乙個子元件的寬度以便所有子元件的寬度等於總寬度。
在效果圖中，你會發現如果各個子面板的高度都不同，就會出現這種不太美觀的效果，當然，有時候可能需要這種效果，但總的來說還是高度統一為容器的高度較美觀。如果要讓高度統一為容器高度，可以在layout的配置物件內將align配置項定義為stretch，**如下：
layout:,1234對於align配置項來說，還有其他對齊方式可選：
在盒子布局中也是可以使用拆分條的，不過它使用的元件與邊框布局不同，它使用的是ext.resizer.splitter元件。要在盒子布局設定 拆分條，與邊框布局的用法是一樣的。要注意的是，水平盒子布局的拆分條是固定繫結在子元件的左邊的，而垂直盒子布局的拆分條是固定繫結在元件的頂部的，總 的來說，無論是水平盒子布局還是垂直盒子布局，在第乙個子元件設定拆分條是沒有效果的。
如果確實需要效果圖中的效果，但希望所有子元件居中顯示，可以在layout的配置物件中將pack配置項設定為center，**如下：
layout:,1234這樣，效果圖中的三個子元件就會水平居中顯示了。如果要右對齊（水平盒子布局）或底部對齊（垂直盒子布局），可將pack的值設定為end。pack的預設值為start，也就是效果圖中的效果。
自適應布局就是把子元件的尺寸設定為容器的尺寸，完全填滿容器的可視空間，這是一種常有比較，也比較簡單，只要把layout的型別設定為fit就行了。
一般情況下，只有在容器只有乙個子元件的情況下才適合使用自適應布局，不然，當有多個子元件時，就會每乙個子元件都會和容器的尺寸一樣，顯示就會出問題。這時候，應該使用盒子布局或者卡片布局。
卡片布局與自適應布局一樣，都會把子元件的尺寸設定未容器的尺寸，不同之處在於，它可以擁有多個子元件，但每次只顯示其中乙個。為了能對子元件進行 切換，特意在布局中新增了getnext、getprev、next、prev和setactiveitem等方法。要呼叫這些方法，需要先呼叫容器的 getlayout方法返回布局物件，再呼叫它的方法。
居中布局很簡單，就是把子元件全部居中顯示。與盒子布局一樣，它也是使用絕對定位的方式來實現子元件居中顯示的。居中布局典型的應用是顯示預覽 時，在容器內居中顯示元件。與自適應布局一樣，容器內一般都是只有乙個子元件。如果容器內有多個子元件，所以子元件都會居中顯示，不過顯示是層疊式 的，如下圖：
上圖的效果只是把上面示例中的布局修改未居中布局，把尺寸大的子元件作為第乙個子元件，把尺寸最小的子元件作為最後乙個子元件。從圖中的效果可以看到，居中布局會依子元件的定義次序來層疊子元件，也就是最後乙個渲染的子元件會顯示在最前面。
未完待續……
談談Ext JS的元件 布局的使用方法
在ext js中，包含兩類布局 元件類布局和容器類布局。由於有些元件是有不同的元件組合而成的，如字段就由標題和輸入框構成，他們之間也是存在布局關係的，而這 就需要元件類布局來處理元件內自己特有的布局關係。如果我們不定義自己的元件，基本不需要使用到元件布局，知道就行了。本文主要介紹的是容器類布局，因為...
談談Ext JS的元件 布局的使用方法續二
絕對布局讓我回想到了使用foxpro開發的時候，哪時候的介面布局就是這樣，通過設定控制項的左上角座標 x，y 和寬度來進行的，因為輸入控制項的 高度基本是固定的，所以不需要設定。在視覺化程式設計沒有出現之前，開發介面算是個苦差事，因為布局是需要花費不少功夫的，例如想要在已經定義好的元件中插入 乙個元...
談談Ext JS的元件 布局的使用方法續一
盒子布局主要作用是以水平 ext.layout.container.hbox 或垂直方式 ext.layout.container.vbox 來劃分容器區域。這也是比較常有的布局方式。使用盒子布局，除了要在容器定義layout配置項外，還需要在子元件指定子元件的寬度 hbox 或高度 vbox 指定...