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

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

转载最新推荐文章于 2019-05-13 14:53:23 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

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

本文深入解析 Sencha Touch 中的Box布局，包括HBox、VBox、经典九宫格布局与松散九宫格布局的实现方法。通过实例代码展示如何灵活运用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：

    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

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

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