Sencha Touch快速入門2.0之Box布局
Sencha Touch快速入門2.0之Box布局是本文要介紹的內(nèi)容，上一篇講到Sencha Touch快速入門2.0之Chorme瀏覽器調(diào)試功能介紹，接著在學(xué)習布局的內(nèi)容。
Sencha Touch里的布局有五種
hbox
vbox
card
fit
auto[默認]
實際上可以分為Box布局和Fit布局兩種。
Sencha touch里的布局應(yīng)該理解為：該控件內(nèi)部子項的排列方式。
我們今天先來看看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
但是，只是知道這些，還不足以玩轉(zhuǎn)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'}
- ]
- });
- }});
關(guān)于這里的flex，sencha Touch使用了css3中的彈性和模型，所以大家如果有興趣可以看看 擴展閱讀：css3中的彈性盒模型
vbox變型2：
在上面代碼的defaults中加入width : '100%'，得到下圖
了解以上內(nèi)容之后，我們來想想經(jīng)典的九宮格布局如何實現(xiàn)吧！
相必大家也已經(jīng)心中有數(shù)了。
經(jīng)典的九宮格布局：
九宮格
- 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，到這里，你已經(jīng)可以對box已經(jīng)可以運用自如了，下一篇，我們將接著講解sencha touch里的另一種布局“Fit”布局。
小結(jié)：Sencha Touch快速入門2.0之Box布局的內(nèi)容介紹完了，希望通過本文的學(xué)習能對你有所幫助！
