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') } }
                            ]
                        }
                    ]
                },html: 'Align: ',handler: function() { layout.setAlign('start'); },handler: function() { layout.setAlign('center'); } },handler: function() { layout.setAlign('end'); } },{ text: 'Stretch',handler: function() { layout.setAlign('stretch'); } }
                            ]
                        }
                    ]
                },{ xtype: 'button',text: 'Btn 1',margin: 2 },text: 'Btn 2',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',layout: 'vbox',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',layout: {
        type: 'vbox',pack: 'start'
    },items: [
        {
            docked: 'top',title: 'VBox Layout'
        },{
            docked: 'top',items: [
                {
                    xtype: 'container',style: 'color: #fff; padding: 0 10px; width: 85px;'
                },{
                    xtype: 'segmentedbutton',items: [
                        { text: 'Start',handler: function() { layout.setPack('end') } }
                    ]
                }
            ]
        },handler: function() { layout.setAlign('stretch'); } }
                    ]
                }
            ]
        },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);  // 激活第二个模块
                            }
                        },text: 'Third',handler: function(){
                                panel.setActiveItem(2);  // 激活第三个模块
                            }
                        },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',xtype: 'panel',height: 20,html: 'This is docked to the top'
        },flex: 2
        }
    ]
});

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

docked: 'top'

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

Ext.create('Ext.Container',items: [
        {
            docked: 'left',width: 100,html: 'This is docked to the left'
        },flex: 2
        }
    ]
});

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

docked: 'left'

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