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

weixin_34378045

于 2014-10-07 14:25:00 发布

阅读量69

点赞数

原文链接：http://www.cnblogs.com/mobileliker/articles/4009311.html

版权

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

Sencha Touch里的布局有五种

hbox
vbox
card
fit
auto[默认]

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

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

hbox：

 
    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变型：

 
    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%'，得到下图

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

经典的九宫格布局：

 
    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！你知道怎么做的！

松散九宫格：

 
    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. 
    });

转载于:https://www.cnblogs.com/mobileliker/articles/4009311.html

weixin_34378045

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Sencha Touch 快速入门2.0 第三章布局（1）Box布局（转）

链接：http://extjs.org.cn/node/549Sencha Touch里的布局有五种hboxvboxcardfitauto[默认] 实际上可以分为Box布局和Fit布局两种。Sencha touch里的布局应该理解为：该控件内部子项的排列方式。我们今天先来看看box布局Box布局　　顾名思义，box布局就是一个个的box组成的。...
复制链接

扫一扫