Sencha Touch学习笔记（三）布局

之前的文章提到了layout: ‘hbox’,这个其实就是布局。本篇主要就来讲layout，布局在Extjs和Sencha Touch中都是很重要的一部分，也有相似的部分，当然Sencha Touch作为移动框架，布局也很有移动端的特性。
布局描述是组件的大小和位置。
Sencha Touch的布局有hbox、vbox、card、fit、dock等等。

Hbox Layout

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

显示效果如下：

由此可见，hbox，需要有两点注意的地方：
1.在需要布局的容器配置属性 layout：’hbox’
2.在其子组件中配置属性 flex：，flex的值代表该组件在容器中占用总宽度的几份。

Vbox Layout

vbox 和 hbox类似，不过是分割的高度

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'vbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

显示效果如下：

由此可见，vbox，需要有两点注意的地方：
1.在需要布局的容器配置属性 layout：’ vbox’
2.在其子组件中配置属性 flex：，flex的值代表该组件在容器中占用总高度的几份。

Card Layout

有时候，你想在一个小的屏幕上显示多个信息屏，你可以用Card Layout来实现。一次setActiveItem 只能显示一个模块。
但这个布局用的比较少，大部分时间用Tab Panel或者 Carousel来实现多个屏幕的切换。

var panel = Ext.create('Ext.Panel', {
    layout: 'card',
    items: [
        {
            html: "First Item"
        },
        {
            html: "Second Item"
        },
        {
            html: "Third Item"
        },
        {
            html: "Fourth Item"
        }
    ]
});

panel.setActiveItem(1);

这个例子我们让第二个模块显示，注意：setActiveItem 设置的下标是从0开始的。

Fit Layout

从字面上就能理解这个布局，它的作用是使子组件配合其父容器的全尺寸。
例如，如果你有一个父容器是200px的：给子组件一个“Fit”的布局，子组件也将200px的：

var panel = Ext.create('Ext.Panel', {
    width: 200,
    height: 200,
    layout: 'fit',

    items: {
        xtype: 'panel',
        html: 'Also 200px by 200px'
    }
});

Ext.Viewport.add(panel);

Docking

Docking能够组合其他的布局，使额外的组件停靠在父容器的边缘，即上下左右。
让我们结合hbox试一下：

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            docked: 'top',
            xtype: 'panel',
            height: 20,
            html: 'This is docked to the top'
        },
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

显示的效果如下：

由此可见 docking 只需要在子组件中配置docked：属性，它可以配置的值有：’top’,’right’,’bottom’,’left’(上、右、下、左)

除了基本的布局之外 还要说的是Pack和Align

Hbox 中的Pack和Align

文字说明可能比较难理解，让我们之间上例子：

Ext.application({
    name : 'Sencha',

    launch : function() {
        var container = Ext.create('Ext.Container', {
            fullscreen: true,

            layout: {
                type: 'hbox',
                align: 'start',
                pack: 'start'
            },

            items: [{
                docked: 'top',
                xtype: 'titlebar',
                title: 'HBox Layout'
            },

            {
                docked: 'top',
                xtype: 'toolbar',
                items: [{
                    xtype: 'container',
                    html: 'Pack: ',
                    style: 'color: #fff; padding: 0 10px; width: 85px;'
                }, {
                    xtype: 'segmentedbutton',
                    allowDepress: false,
                    items: [{
                        text: 'Start',
                        handler: function() {
                            layout.setPack('start');
                        },
                        pressed: true
                    }, {
                        text: 'Center',
                        handler: function() {
                            layout.setPack('center');
                        }
                    }, {
                        text: 'End',
                        handler: function() {
                            layout.setPack('end');
                        }
                    }]
                }]
            }, {
                docked: 'top',
                xtype: 'toolbar',
                items: [{
                    xtype: 'container',
                    html: 'Align: ',
                    style: 'color: #fff; padding: 0 10px; width: 85px;'
                }, {
                    xtype: 'segmentedbutton',
                    allowDepress: false,
                    items: [{
                        text: 'Start',
                        handler: function() {
                            layout.setAlign('start');
                        },
                        pressed: true
                    }, {
                        text: 'Center',
                        handler: function() {
                            layout.setAlign('center');
                        }
                    }, {
                        text: 'End',
                        handler: function() {
                            layout.setAlign('end');
                        }
                    }, {
                        text: 'Stretch',
                        handler: function() {
                            layout.setAlign('stretch');
                        }
                    }]
                }]
            },

            {
                xtype: 'button',
                text: 'Btn 1',
                margin: 2
            }, {
                xtype: 'button',
                text: 'Btn 2',
                margin: 2
            }, {
                xtype: 'button',
                text: 'Btn 3',
                margin: 2
            }]
        });

        var layout = container.getLayout();
    }
});

这段代码可能稍微有点长，但是你将它贴下去运行一下可能对Pack和Align就能理解了。
Pack在水平方向，有三个值pack：，’start’,’center’,’end’
Align在垂直方向，有四个值 align：，’start’,’center’,’end’，’stretch’最后一个是指拉伸。

Vbox 中的Pack和Align

Vbox和Hbox反过来了，Pack在垂直方向，Align在水平方向
Pack在垂直方向，有三个值pack：，’start’,’center’,’end’
Align在水平方向，有四个值 align：，’start’,’center’,’end’，’stretch’最后一个是指拉伸。

好了，有关布局的问题就这么多。