Sencha Touch 2 快速入门系列（五）-- 布局（Layouts）

本文已添加至Sencha Touch 2快速入门系列索引：http://blog.csdn.net/ardy_c/article/details/7544470

转载请注明出处：http://blog.csdn.net/ardy_c/article/details/7542256

布局（Layouts）是什么，相信也不用我在这里多说。无论是网页，还是手机应用，我们都需要给自己的版面进行布局。一方面是为了方便用户阅读，一方面是为了版面美观整齐，另外...还有很多很多原因，有兴趣的童孩可以自己去总结下 = =||，和主题无关的，这里不扯谈了，免得浪费大家时间。Sencha Touch 2为了方便大家使用，预定义了几种布局的方式：HBox、VBox、Card、Fit、Docking。

HBox（水平盒子）

正如标题所示，Hbox（水平盒子）是将处于其中的子元素按水平排列起来。如何实现这种布局方式？我们只需要将容器的layout属性设置为'hbox'即可。下面我们来看看一段简单的代码：

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

代码解析：
上面代码创建了一个容器，并采用了hbox的布局方式。在两个子元素里，分别设置了属性flex:1和flex:2。flex属性，是根据比例的方式来计算该组件所占的宽度（因为这里使用的是在水平方向上的排列，flex所计算的就是水平方向上所占的位置，因此这里是定义了宽度；如果是使用vbox，flex计算的就是组件的所占的高度了）。flex的计算方法和我们平时所使用的百分比定义宽度有点区别。例如，这里定义了两个同级元素的flex值分别为1和2，那么他们总的宽度就是3（1+2），也是我们平时习惯使用的100%。然后，flex值为1的占的宽度是1/3，即33.33%；flex值为2的占的宽度是2/3，即66.67%。通过上面的代码所建立的模型大概如下图：

Hbox

大家或者会想到，很多时候我们的内容不一定能占满屏，我们可能需要“左对齐”、“居中”、“右对齐”这些排列方式。可以，没问题！我们可以设置layout的align和pack属性即可实现各种对齐方式。大家可以运行一下以下这段代码看看效果：

Ext.application({    name: 'sample',    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();    }});

代码解析：
上面代码中，我们将一个数据对象传入到layout中，用于设置layout。数据对象中包含有type、align、pack。type是设置采用哪种布局方式；align在hbox模式中，是指垂直方向上的对齐方式，相当于css里的valign，可选值有start（开始端对齐 / 顶端对齐）、center（居中）、end（末端对齐 / 底部对齐）、stretch（伸展，填满垂直方向上的空间）；pack在hbox模式中，是指水平方向上的的对齐方式，相当于css里的align，可选值有start（开始端对齐 / 左对齐）、center（居中）、end（末端对齐 / 右对齐）。运行上面代码，点击下各个按钮，你就可以看到各个值相对应的效果了。

VBox（垂直盒子）

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

代码解析：

这段代码和HBox的第一段代码唯一不同的地方就是这里的layout是设为'vbox'，其它的全部一样。这次flex所计算的就是高度，而非宽度了。大概效果如下图所示。

VBox

在对齐方式上，与HBox有点区别，align和pack的功能正好相反，但可选值不变。align在vbox模式中，是指水平方向上的对齐方式，相当于css里的align，可选值有start（开始端对齐 / 左对齐）、center（居中）、end（末端对齐 / 右对齐）、stretch（伸展，填满水平方向上的空间）；pack在vbox模式中，是指垂直方向上的的对齐方式，相当于css里的valign，可选值有start（开始端对齐 / 顶端对齐）、center（居中）、end（末端对齐 / 底部对齐）。运行一下以下代码看看效果：

var container = Ext.create('Ext.Container', {    fullscreen: true,    layout: {        type: 'vbox',        align: 'start',        pack: 'start'    },    items: [        {            docked: 'top',            xtype: 'titlebar',            title: 'VBox 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();

Card（卡片方式）

当你需要显示很多信息时，一个屏的容量显然不能满足你的需求，这时你可以选用Card（卡片方式）布局方式。卡片方式是指容器内存在多个item，每次只激活显示其中一个，并将该item填满容器，其余的items将被隐藏起来，当有需要的时候，通过调用方法将需要的item激活。

Ext.application({    name: 'sample',    launch: function() {                var panel = Ext.create('Ext.Panel', {            layout: 'card', // 将容器的布局方式设置为卡片方式            items: [                {                    xtype: 'toolbar', // 创建一个工具栏                    docked: 'top',    // 停靠在顶部                    items:[           // 创建四个按钮                        {                            xtype: 'button',                            text: 'First',                            handler: function(){                                panel.setActiveItem(0);  // 激活第一个模块,即第一屏内容                            }                        },                        {                            xtype: 'button',                            text: 'Second',                            handler: function(){                                panel.setActiveItem(1);  // 激活第二个模块                            }                        },                        {                            xtype: 'button',                            text: 'Third',                            handler: function(){                                panel.setActiveItem(2);  // 激活第三个模块                            }                        },                        {                            xtype: 'button',                            text: 'Fourth',                            handler: function(){                                panel.setActiveItem(3);  // 激活第四个模块                            }                        }                    ]                  },                {                    html: "First Item"                },                {                    html: "Second Item"                },                {                    html: "Third Item"                },                {                    html: "Fourth Item"                }            ]        });                Ext.Viewport.add(panel);        panel.setActiveItem(0); // 默认激活第一个模块            }});

代码解析：

以上代码中，在容器内部建立了一个工具栏和四个屏的信息。工具栏自己使用了docked属性，停靠于容器的顶部，因此不当作card处理。后面四个子元素模块被视为card，按照定义时的顺序保存于一个数组里面，通过父容器的setActiveItem(index)方法来激活显示的模块信息。而toolbar中，每个按钮的点击事件的处理中都调用激活相应模块的方法。运行上面代码体验一下效果。

Fit（自适应方式）

Fit（自适应方式），很容易理解，它就是自动将父容器填满。如下图所示，

Fit

例如一个宽200px，高200px 大小的父容器，设置了layout方式是fit，并且只有一个子组件，那么该子组件也是宽200px高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（停靠）在容器里的top（上）、bottom（下）、left（左）、right（右）四条边上，而其它子组件也会根据需要调整大小。例如，我们修改一下第一个例子，代码如下：

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

我们为其多添加了xtype为'panel'，docked为'top'的panel作为子组件。这样，就在原来的例子的基础上，多出了一个停靠在顶部的panel。因为该panel也占据了一定的高度，而原来的两个panel的高度也将自动缩小。大概效果如下图所示。当然，你也可以运行一下上方代码查看效果。

docked: 'top'

现在，我们修改一下第二个例子，看看当docked为left的时候是什么效果：

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

这次是docked:'left' 了，panel停靠容器内部的左边，占用了一定的宽度，因此，其它两个panel的宽度也自动收窄了。

docked: 'left'

以上就是Sencha Touch 2的几种布局方式。由于Sencha Touch 2是允许多层组件的嵌套，因此，我们也可以运用多种布局组合去完成我们页面排版。童孩们多做练习，看怎样布置你的app会更加美观、大方。