你如果對ST的組件有了一些認識後，然後你又想做一些東東來體驗下ST。拿到設計圖後，那麼你就需要好好的規劃你的應用，需要哪些組件，各組件都應該擺放在哪裏？
這個時候你就需要了解一下ST裏面的佈局（layout)
同樣，打開我們的API文當http://docs.sencha.com/touch/2-0/#!/api
找到layout,並展開，
我們可以看到ST爲我們提供了：vbox,hbox,card,fit
有人肯定會問還有abstractBox,和default
abstractBox（抽象盒子）是vbox和hbox的父類，是default的子類，
default（默認）提所有佈局的基類，一般不需要提交
所以常用的只有vbox,hbox,card,fit
我在此特別聲明一下：所有的佈局方式都是應用於（容器的）子組件的擺放上面，比如：一個廚房，廚房裏面很多東西，如何擺放你必須告訴廚房，而不是告訴桌子或凳子。
下面我們就一一介紹下嘍!
vbox:垂直襬放盒子
hobx:水平擺放盒子
card:卡片式存放
fit:填充式存放
先從字面意思上去理解一下
vbox：
就是將容器內部的所有項(item)，垂直方式擺放。
看圖:
代碼：
//在一個全屏的容器中，我們放了四個子項，第一項佔了一份
Ext.create('Ext.Container',
{ fullscreen:true,
layout:
'vbox', items:
[ { //第一項，佔了四份中的一份 html:
"First
Item", style:'background:red', flex:1, }, { //第二項，佔了四份中的一份 html:
"Second
Item", style:'background:yellow', flex:1, }, { //第三項，佔了四份中的一份 html:
"Third
Item", style:'background:blue', flex:1, }, { //第四項，佔了四份中的一份 html:
"Fourth
Item", style:'background:green', flex:1, } ]}); |
看代碼備註。
我們在一個全屏的容器，放了四個item，我們又採用了vbox，意味着，我們將需要把這些項垂直襬放。
有人會問了，那如何去確定某一項佔多少位置（高度）呢?
恩，我們確實需要告訴這個容器，各子項需要多少位置才能放得下，在這我們應用了flex（份數），通過flex去請求容器給它對應的空間。
容器在這種佈局會彙總所有子項的flex總數。然後平分，在這我們flex總數是4，那就意味着，我們這個全容器將分成4分，每個子項的flex都是1，說明他們都只點了一份了（平均分配了！）
在圖上，你可以看出，他們的高度都相等的哦。
你可以把上面的代碼複製到我們的code editor中去查看他的效果，然後改變各項的 flex去體驗容器是怎麼分配空間的。
又有人會問了，flex無法確定我的實際高度？
恩，確實，這裏我們還有一個利器 height，我們可以通過設定某一個子項的height告訴容器它需要審請多少高度。
如：
//在一個全屏的容器中，我們放了四個子項，第一項佔了150的高度，然後將容器的剩餘高度分成了三份，每項佔一份Ext.create('Ext.Container',
{ fullscreen:true,
layout:
'vbox', items:
[ { //第一項，佔了150px的高度 html:
"First
Item", style:'background:red', height:150, }, { //第二項，佔了三份中的一份 html:
"Second
Item", style:'background:yellow', flex:1, }, { //第三項，佔了三份中的一份 html:
"Third
Item", style:'background:blue', flex:1, }, { //第四項，佔了三份中的一份 html:
"Fourth
Item", style:'background:green', flex:1, } ]}); |
效果：
注意看代碼備註，或許已經明白了？
vbox是作於垂直方向的，用來分配窗器高度的。
那麼hobx就很明顯了，他是平分容器寬度的。
我們把上述代碼的layout改爲hbox,看看效果。
代碼：
//在一個全屏的容器中，我們放了四個子項，第一項佔了150的寬度，然後將容器的剩餘高度分成了三份，每項佔一份Ext.create('Ext.Container',
{ fullscreen:true,
layout:
'hbox', items:
[ { //第一項，佔了150px的高度 html:
"First
Item", style:'background:red', width:150, }, { //第二項，佔了三份中的一份 html:
"Second
Item", style:'background:yellow', flex:1, }, { //第三項，佔了三份中的一份 html:
"Third
Item", style:'background:blue', flex:1, }, { //第四項，佔了三份中的一份 html:
"Fourth
Item", style:'background:green', flex:1, } ]}); |
同樣看備註，你或許能夠明白了vbox和hbox的區別與作用了？不明白的，速度加入我們的社區或羣:13453484
下面我們一搞個vbox和hbox結合的例子
代碼：
//在一個全屏的容器中，我們放了四個子項，將容器的剩餘高度分成了四份，每項佔一份Ext.create('Ext.Container',
{ fullscreen:true,
layout:
'vbox', items:
[ { //第一項，佔了四份中的一份
style:'background:red', flex:1, layout:'hbox', items:[{html:'hbox的子項一',flex:1,
style:'background:white'},{html:'hbox的子項二',flex:1,
style:'background:gray',}] }, { //第二項，佔了四份中的一份 html:
"Second
Item", style:'background:yellow', flex:1, }, { //第三項，佔了四份中的一份 html:
"Third
Item", style:'background:blue', flex:1, }, { //第四項，佔了四份中的一份 html:
"Fourth
Item", style:'background:green', flex:1, } ]}); |
效果：
至此，你會用了沒,理解了沒？不會的,不理解的，就code editor裏面多多練習，多多體會哈。這很重要哦......
下面，我們來講fit,card。
fit是用來將子項整個填充至容器中，意思就是窗口有多子，那麼他下面的子項就有多大了。
用實例說話：
//創建一個300*200的容器，裏面放了一個子項，並指定這個容器的layout爲fit佈局var container=
Ext.create('Ext.Container',
{ width:
300, height:
200, layout:
'fit', items:
{ xtype:
'panel', html:
'我也將是300*200的大小', style:'background:red' }});//將container添加到我們的St應用的頂層容器中，Ext.Viewport是一個全局容器，無需定義，它指向的是你應用的最頂層。Ext.Viewport.add(container); |
效果：
那麼card佈局是怎樣的呢，他其實和fit相似，只是他可以有多層，就像卡放一樣疊起來放在容器中。
照樣用實例說話：
//創建一個全屏的容器，在裏面放了四項，容器的layout爲cardvar container=
Ext.create('Ext.Container',
{ layout:
'card', fullscreen:true, items:
[ { html:
"First
Item" }, { html:
"Second
Item" }, { html:
"Third
Item",<br>
style:'background:red',<br> }, { html:
"Fourth
Item" } ]});//默認我們會顯示第一項，因採用card佈局，我們可以指定將第三項顯示出來（下標從0開始）container.setActiveItem(2); |
效果：
//看備註，明白了麼？很簡單，card佈局內的東西就是把它一層層堆在裏面，要顯示哪一層的時候，只需要調用容器的setActiveItem
card在一次顯示上，只會顯示一個子項，而其它的子項將是不可見的。
就上面的例子，我們把layout的card改爲fit
你再看效果：
即便是我們調和了setActiveItem容器也是把四個項都顯示出來的，很亂？
現在明白fit和card的區別了吧
如果容器中只一項，且需要填充顯示的時候你可以用fit,如果有多項且需要分層靈活顯示，那麼你就需要用card了。
至此，我們的佈局全部講完了，學習還得靠自己哈，多多練習，就在我們的code editor裏面，每種佈局你都需要玩熟哦。