jQuery MiniUI,快速开发WebUI界面

Sencha Touch 快速入门2.0 第三章 布局(1)Box布局


Sencha Touch里的布局有五种

  • hbox
  • vbox
  • card
  • fit
  • auto[默认]
实际上可以分为Box布局和Fit布局两种。
Sencha touch里的布局应该理解为:该控件内部子项的排列方式。
我们今天先来看看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

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'}
            ]
        });
    }
});


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

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

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

经典的九宫格布局:

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%',
                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,到这里,你已经可以对box已经可以运用自如了,下一篇,我们将接着讲解sencha touch里的另一种布局“Fit”布局。

作者:威老
原文地址: http://www.cnblogs.com/weilao/archive/2011/08/23/2150654.html