Sencha Touch 快速入门2.0 第三章 布局（1）Box布局（转）

链接：http://extjs.org.cn/node/549

Sencha Touch里的布局有五种

• hbox
• vbox
• card
• fit
• auto[默认]

实际上可以分为Box布局和Fit布局两种。
Sencha touch里的布局应该理解为：该控件内部子项的排列方式。
我们今天先来看看box布局

Box布局
　　顾名思义，box布局就是一个个的box组成的。
　　　　hbox: 水平排列、垂直居中、靠左置顶
　　　　vbox: 竖直堆叠、水平居中、靠上置顶

hbox：

view sourceprint?

01.hbox

02. 

03.Ext.setup({

04.tabletStartupScreen: 'tablet_startup.png',

05.phoneStartupScreen: 'phone_startup.png',

06.icon: 'icon.png',

07.glossOnIcon: false,

08.onReady : function() {

09.var pnl = new Ext.Panel({

10.fullscreen: true,

11.layout: 'hbox',

12.items:[

13.{xtype:'button',text:'按钮1'},

14.{xtype:'button',text:'按钮2'},

15.{xtype:'button',text:'按钮3'}

16.]

17.});

18.}

19.});

vbox：
　　将以上的hbox改为vbox

vbox变型：

view sourceprint?

01.vbox变型

02. 

03.Ext.setup({

04.tabletStartupScreen: 'tablet_startup.png',

05.phoneStartupScreen: 'phone_startup.png',

06.icon: 'icon.png',

07.glossOnIcon: false,

08.onReady : function() {

09.var pnl = new Ext.Panel({

10.fullscreen: true,

11.layout: 'vbox',

12.defaults: {

13.flex: 1

14.},

15.items:[

16.{xtype:'button',text:'按钮1'},

17.{xtype:'button',text:'按钮2'},

18.{xtype:'button',text:'按钮3'}

19.]

20.});

21.}

22.});

关于这里的flex，sencha Touch使用了css3中的弹性和模型

vbox变型2：
　　在上面代码的defaults中加入width : '100%'，得到下图

　　了解以上内容之后，我们来想想经典的九宫格布局如何实现吧！
　　相必大家也已经心中有数了。

经典的九宫格布局：

view sourceprint?

01.Ext.setup({

02.tabletStartupScreen: 'tablet_startup.png',

03.phoneStartupScreen: 'phone_startup.png',

04.icon: 'icon.png',

05.glossOnIcon: false,

06.onReady : function() {

07.var pnl = new Ext.Panel({

08.fullscreen: true,

09.layout: 'vbox',

10.defaults: {

11.flex: 1,

12.width: '100%',

13.defaults: {

14.flex: 1,

15.height: '100%'

16.}   

17.},

18.items:[{

19.xtype: 'panel',

20.layout: 'hbox',

21.items:[

22.{xtype:'button',text:'按钮1'},

23.{xtype:'button',text:'按钮2'},

24.{xtype:'button',text:'按钮3'}

25.]

26.},{

27.xtype: 'panel',

28.layout: 'hbox',

29.items:[

30.{xtype:'button',text:'按钮4'},

31.{xtype:'button',text:'按钮5'},

32.{xtype:'button',text:'按钮6'}

33.]

34.},{

35.xtype: 'panel',

36.layout: 'hbox',

37.items:[

38.{xtype:'button',text:'按钮7'},

39.{xtype:'button',text:'按钮8'},

40.{xtype:'button',text:'按钮9'}

41.]

42.}]

43.});

44.}

45.});

嫌紧挨着不舒服？别急，我们还有些属性没用上！你没有猜错那就是-----margin、padding！你知道怎么做的！

松散九宫格：

view sourceprint?

01.Ext.setup({

02.tabletStartupScreen: 'tablet_startup.png',

03.phoneStartupScreen: 'phone_startup.png',

04.icon: 'icon.png',

05.glossOnIcon: false,

06.onReady : function() {

07.var pnl = new Ext.Panel({

08.fullscreen: true,

09.layout: 'vbox',

10.defaults: {

11.flex: 1,

12.width: '100%',

13.padding: 10,

14.defaults: {

15.flex: 1,

16.height: '100%',

17.margin: 10

18.}   

19.},

20.items:[{

21.xtype: 'panel',

22.layout: 'hbox',

23.items:[

24.{xtype:'button',text:'按钮1'},

25.{xtype:'button',text:'按钮2'},

26.{xtype:'button',text:'按钮3'}

27.]

28.},{

29.xtype: 'panel',

30.layout: 'hbox',

31.items:[

32.{xtype:'button',text:'按钮4'},

33.{xtype:'button',text:'按钮5'},

34.{xtype:'button',text:'按钮6'}

35.]

36.},{

37.xtype: 'panel',

38.layout: 'hbox',

39.items:[

40.{xtype:'button',text:'按钮7'},

41.{xtype:'button',text:'按钮8'},

42.{xtype:'button',text:'按钮9'}

43.]

44.}]

45.});

46.}

47.});