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

最新推荐文章于 2019-05-13 14:53:23 发布

mobileliker163

最新推荐文章于 2019-05-13 14:53:23 发布

阅读量273

点赞数

本文链接：https://blog.csdn.net/mobileliker163/article/details/41722717

版权

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