談談Ext JS的組件——布局的用法續一
盒子布局
盒子布局主要作用是以水平（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‘,{
renderTo: Ext.getBody(),
width:400,
height:200,
border: 5,
style:{
borderColor:‘yellow‘,
borderStyle: ‘solid‘
},
layout:{
type:‘hbox‘
},
defaults:{
bodyStyle:{
borderColor: ‘red‘
}
},
items:[
{html:‘50×50‘ 為了加強演示效果。特意將容器的邊框設置為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:{
type:‘hbox‘,
align:‘stretch‘
},對於align配置項來說。還有其它對齊方式可選：
- begin：假設是水平盒子布局。則是頂部對齊，假設是垂直盒子布局，則左對齊。
- middle：假設是水平盒子布局。則是垂直居中對齊，假設是垂直盒子布局，則是水平居中對齊。
- end：假設是水平盒子布局，則是底部對齊。假設是垂直盒子布局。則是右對齊。
- stretchmax：假設是水平盒子布局，則對齊高度最高的那個子組件。假設是垂直盒子布局，則對齊寬度最寬的那個子組件。
拆分條
在盒子布局中也是能夠使用拆分條的。只是它使用的組件與邊框布局不同。它使用的是Ext.resizer.Splitter組件。要在盒子布局設置拆分條，與邊框布局的使用方法是一樣的。要註意的是，水平盒子布局的拆分條是固定綁定在子組件的左邊的。而垂直盒子布局的拆分條是固定綁定在組件的頂部的，總的來說，不管是水平盒子布局還是垂直盒子布局。在第一個子組件設置拆分條是沒有效果的。
裝箱
假設確實須要效果圖中的效果。但希望所有子組件居中顯示。能夠在layout的配置對象中將pack配置項設置為center，代碼例如以下：
layout:{
type:‘hbox‘,
pack: ‘center‘
},這樣，效果圖中的三個子組件就會水平居中顯示了。假設要右對齊（水平盒子布局）或底部對齊（垂直盒子布局），可將pack的值設置為end。pack的默認值為start，也就是效果圖中的效果。
自適應布局（Ext.layout.container.Fit）
自適應布局就是把子組件的尺寸設置為容器的尺寸。全然填滿容器的可視空間，這是一種常有比較。也比較簡單，僅僅要把layout的類型設置為fit即可了。
普通情況下，僅僅有在容器僅僅有一個子組件的情況下才適合使用自適應布局，不然，當有多個子組件時，就會每個子組件都會和容器的尺寸一樣，顯示就會出問題。
這時候，應該使用盒子布局或者卡片布局。
卡片布局（Ext.layout.container.Card）
卡片布局與自適應布局一樣，都會把子組件的尺寸設置未容器的尺寸，不同之處在於。它能夠擁有多個子組件，但每次僅僅顯示當中一個。為了能對子組件進行切換。特意在布局中加入了getNext、getPrev、next、prev和setActiveItem等方法。要調用這些方法，須要先調用容器的getLayout方法返回布局對象，再調用它的方法。
居中布局（Ext.layout.container.Center）
居中布局非常easy，就是把子組件所有居中顯示。與盒子布局一樣。它也是使用絕對定位的方式來實現子組件居中顯示的。
居中布局典型的應用是顯示圖片預覽時。在容器內居中顯示圖片組件。
與自適應布局一樣。容器內一般都是僅僅有一個子組件。
假設容器內有多個子組件，所以子組件都會居中顯示，只是顯示是層疊式的，例如以下圖：
上圖的效果僅僅是把上面演示樣例中的布局改動未居中布局，把尺寸大的子組件作為第一個子組件。把尺寸最小的子組件作為最後一個子組件。從圖中的效果能夠看到，居中布局會依子組件的定義次序來層疊子組件，也就是最後一個渲染的子組件會顯示在最前面。
未完待續……
請大家尊重作者的辛勤勞動，未經同意。請不要轉載本文，畢竟讀者的支持是作者撰寫文章的動力。
談談Ext JS的組件——布局的用法續一