Sencha Touch快速入門2.0之Box布局是本文要介紹的內容，上一篇講到Sencha Touch快速入門2.0之Chorme瀏覽器調試功能介紹，接著在學習布局的內容。

Sencha Touch里的布局有五種

hbox

vbox

card

fit

auto[默認]

實際上可以分為Box布局和Fit布局兩種。

Sencha touch里的布局應該理解為：該控件內部子項的排列方式。

我們今天先來看看box布局

Box布局

顧名思義，box布局就是一個個的box組成的。

hbox: 水平排列、垂直居中、靠左置頂

vbox: 豎直堆疊、水平居中、靠上置頂

hbox：

hbox   
Ext.setup({      
  tabletStartupScreen: 'tablet_startup.png',      
  phoneStartupScreen: 'phone_startup.png',      
  icon: 'icon.png',      
  glossOnIcon: false,      
  onReady : function() {          
    var pnl = new Ext.Panel({              
    fullscreen: true,              
    layout: 'hbox',              
  items:[                  
     {xtype:'button',text:'按鈕1'},                  
     {xtype:'button',text:'按鈕2'},                  
     {xtype:'button',text:'按鈕3'}             
     ]         
   });      
}});  
   
vbox： 

將以上的hbox改為vbox

但是，只是知道這些，還不足以玩轉box布局，下面讓我們看看其他常見的box布局實例。

vbox變型：

vbox變型   
Ext.setup({      
tabletStartupScreen: 'tablet_startup.png',      
phoneStartupScreen: 'phone_startup.png',      
icon: 'icon.png',      
glossOnIcon: false,      
onReady : function() {          
var pnl = new Ext.Panel({              
fullscreen: true,              
layout: 'vbox',              
defaults: {                  
flex: 1              
},              
  items:[                  
  {xtype:'button',text:'按鈕1'},                  
  {xtype:'button',text:'按鈕2'},                  
  {xtype:'button',text:'按鈕3'}             
  ]          
 });      
}}); 

關于這里的flex，sencha Touch使用了css3中的彈性和模型，所以大家如果有興趣可以看看 擴展閱讀：css3中的彈性盒模型

vbox變型2：

在上面代碼的defaults中加入width : '100%'，得到下圖

了解以上內容之后，我們來想想經典的九宮格布局如何實現吧！

相必大家也已經心中有數了。

經典的九宮格布局：

九宮格

Ext.setup({      
tabletStartupScreen: 'tablet_startup.png',    p  
honeStartupScreen: 'phone_startup.png',      
icon: 'icon.png',      
glossOnIcon: false,      
onReady : function() {          
var pnl = new Ext.Panel({              
fullscreen: true,             
 layout: 'vbox',              
 defaults: {                  
 flex: 1,                  
 width: '100%',                  
 defaults: {                      
 flex: 1,                     
  height: '100%'    
  }                  
 },              
 items:[{                 
       xtype: 'panel',    
       layout: 'hbox',    
 items:[                      
    {xtype:'button',text:'按鈕1'},    
    {xtype:'button',text:'按鈕2'},   
    {xtype:'button',text:'按鈕3'}     
  ]              
 },{                 
 xtype: 'panel',       
 layout: 'hbox',     
items:[                      
   {xtype:'button',text:'按鈕4'},    
   {xtype:'button',text:'按鈕5'},  
   {xtype:'button',text:'按鈕6'}]    
 },{                  
 xtype: 'panel',  
 layout: 'hbox',   
 items:[    
 {xtype:'button',text:'按鈕7'},    
 {xtype:'button',text:'按鈕8'},   
 {xtype:'button',text:'按鈕9'}   
]             
}]          
});     
}}); 

嫌緊挨著不舒服？別急，我們還有些屬性沒用上！你沒有猜錯那就是-----margin、padding！你知道怎么做的！

松散九宮格：

松散九宮格

Ext.setup({     
  tabletStartupScreen: 'tablet_startup.png',      
  phoneStartupScreen: 'phone_startup.png',      
  icon: 'icon.png',      
  glossOnIcon: false,      
  onReady : function() {          
    var pnl = new Ext.Panel({     
    fullscreen: true,    
    layout: 'vbox',   
    defaults: {     
  flex: 1,      
  width: '100%',    
   padding: 10,   
   defaults: {    
    flex: 1,     
    height: '100%',   
    margin: 10                  
  }                  
},              
 items:[{         
          xtype: 'panel',   
          layout: 'hbox',   
 items:[           
            {xtype:'button',text:'按鈕1'},   
            {xtype:'button',text:'按鈕2'},   
            {xtype:'button',text:'按鈕3'}          
      ]            
   },{                 
    xtype: 'panel',   
    layout: 'hbox',    
    items:[            
              {xtype:'button',text:'按鈕4'},    
              {xtype:'button',text:'按鈕5'},      
              {xtype:'button',text:'按鈕6'}       
          ]             
    },{                  
     xtype: 'panel',                  
     layout: 'hbox',       
  items:[                      
     {xtype:'button',text:'按鈕7'},     
     {xtype:'button',text:'按鈕8'},      
     {xtype:'button',text:'按鈕9'}     
   ]              
 }]          
});      
}}); 

OK，到這里，你已經可以對box已經可以運用自如了，下一篇，我們將接著講解sencha touch里的另一種布局“Fit”布局。

小結：Sencha Touch快速入門2.0之Box布局的內容介紹完了，希望通過本文的學習能對你有所幫助！