ExtJS 4.x中的布局（layouts in ExtJS 4.x）（一）

  一、布局的来源（ Why we need layout ）

页面上显示的各个元素往往是嵌套的，这些元素在页面上的摆放需要某些元素能够盛放其他一些元素，因此就有了Container（“容器”，一种特殊组件）和Component（一般组件），Container能够盛放其他Container和一般的Component。

    这种元素间的关系使得组件呈现层级关系。下图 展示了 ExtJS4.x 中组件间层级关系一种实例。

    既然组件间呈现层级关系，Container中能盛放其他Container和Component，那么怎么呈现呢？呈现的样子是什么？是从左到右一个一个摆放还是从上到下一个一个摆放？是按照东西南北中来摆放还是随意摆放？… 这些就是layout（布局）的责任范畴了，layout能够设置一个容器中的各个元素怎么放置。当然，layout不仅仅在ExtJS中出现，一切图形界面编程中都涉及它！

二、ExtJS4.x中的布局简介（An brief introduction to layout in ExtJS4.x）

    ExtJS4.x为页面布局提供了多种方案，有按照“东西南北中”方位位置来摆放元素的border布局，也有元素自适应摆放的fit布局，还有从左到右按列摆放元素的hbox布局和从上到下按行摆列元素的vbox布局……ExtJS4.x为页面布局提供了多种解决方案，如下表所示。

名称	对应的类
absolute	Ext.layout.container.Absolute
accordion	Ext.layout.container.Accordion
anchor	Ext.layout.container.Anchor
auto或autocontainer	Ext.layout.container.Auto
autocomponent	Ext.layout.component.Auto
border	Ext.layout.container.Border
box	Ext.layout.container.Box
card	Ext.layout.container.Card
checkboxgroup	Ext.layout.container.CheckboxGroup
column	Ext.layout.container.Column
container	Ext.layout.container.Container
fit	Ext.layout.container.Fit
form	Ext.layout.container.Form
hbox	Ext.layout.container.HBox
table	Ext.layout.container.Table
ux.center	Ext.ux.layout.Center
vbox	Ext.layout.container.VBox

 

    这17中布局方案是在长期界面编程中形成的经典方法，我们应该先学习了解各种布局的功能、特点、使用场合，然后根据自己的需求选择使用。例如，border布局适合于将页面分成“东西南北中”五部分来摆放元素的场合（当然，不必每部分都用到，例如可以只使用其中的center和south部分），它和java Swing中的border布局几乎一致。

       下面以fit、border、hbox、vbox、column这五种布局来简单介绍，并配以实例。

1、fit布局

       fit布局是最简单的布局，只适合于包含单一元素的容器，例如一个panel（面板）只包含另一个panel。使用fit布局时，被包含的元素会充满其父容器。要使用fit布局，只要在容器中的layout配置中指定‘fit’即可。

 实例代码：

Ext.create('Ext.panel.Panel', {
    title: 'Fit Layout',
    width: 300,
    height: 150,
    layout:'fit',
    items: {
       xtype: panel, //可有可无，在Ext.panel.Panel中默认的元素也是panel
       title: 'Inner Panel',   //元素的标题
        html: 'This is the inner panel content',  //内容
        bodyPadding: 20,  //定义padding样式
        border: false  //panel元素无边界
    },
    renderTo: Ext.getBody()
});

实例展示图：

2、border

    border布局非常丰富，同时也比较复杂。它提供“东西南北中”五部分供盛放元素，使得容器可以盛放嵌套panel，同时也使得部分与部分之间可以有工具栏，也可以使各部分之间能够关闭（缩至最小）。要使用border布局，只要在容器中的layout配置中指定‘border’即可。

实例代码：

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 400,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'South Region is resizable',
        region: 'south',     // 配置放置区域为south
        xtype: 'panel',
        height: 100,
        split: true,
        margins: '0 5 5 5'  //margins中个数字对应的方位一次是北东南西
    },{
        // xtype: 'panel' implied by default
        title: 'North Region is collapsible',
        region:'north',
        xtype: 'panel',
        margins: '5 5 0 5',
        height: 100,
        collapsible: true,   // 允许收缩
        id: 'north-region-container',
        layout: 'fit'
    },{
        // Ext.panel.Panel中默认元素类型为xtype:panel
        title: 'West Region is collapsible',
        region:'west',
        xtype: 'panel',
        margins: '5 0 0 5',
        width: 100,
        collapsible: true,
        id: 'west-region-container',
        layout: 'fit'
    },{
        // xtype: 'panel' implied by default
        title: 'East Region is collapsible',
        region:'east',
        xtype: 'panel',
        margins: '5 5 0 0',
        width: 100,
        collapsible: true,
        id: 'east-region-container',
        layout: 'fit'
    },{
        title: 'Center Region',
        region: 'center',//中部区域是必须的，它没有宽高配置，也不需要
        xtype: 'panel',
        layout: 'fit',
        margins: '5 5 5 5'
    }],
    renderTo: Ext.getBody()
});

实例展示图：

 

3、hbox

       hbox布局使得容器中各个元素水平排列，一个挨一个。如果在items中配置元素时指定各个元素的宽度（可以使用绝对数字如200，也可以使用百分比），则显示时将按照指定的宽度显示；如果使用了flex配置，则按照flex比例来显示宽度；如果没有指定，则自动使用builtin（内置）规则安排各个元素的宽度。但是在高度上，则只能使用绝对数字而不能使用百分比。在使用hbox时，可以指定元素align（对齐）规则，top（顶部对齐）、middle（中部对齐）、bottom（底部对齐）、stretch（垂直方向上充满整个容器）、stretch（垂直方向上按照高度最高的对齐）。

实例代码：

Ext.create('Ext.Panel', {
    width: 500,
    height: 300,
    title: "HBoxLayout Panel",
    layout: {
        type: 'hbox',     //指定为hbox布局
        align: 'stretch'  //指定元素的高将充满容器的垂直空间
    },
    renderTo: document.body,
    items: [{
        xtype: 'panel',
        title: 'Inner Panel One',
        flex: 2
    },{
        xtype: 'panel',
        title: 'Inner Panel Two',
        flex: 1
    },{
        xtype: 'panel',
        title: 'Inner Panel Three',
        flex: 1
    }]
});

实例展示图：

 

4、vbox

       与hbox相对，vbox按照垂直方向来摆放元素，其他属性与hbox差不多。

实例代码：

Ext.create('Ext.Panel', {
    width: 400,
    height: 300,
    title: "VBoxLayout Panel",
    layout: {
        type: 'vbox',    //指定为vbox布局
        align: 'center'  //指定各元素将中间对齐
    },
    renderTo: document.body,
    items: [{
        xtype: 'panel',
        title: 'Inner Panel One',
        width: 250,
        flex: 2
    },
    {
        xtype: 'panel',
        title: 'Inner Panel Two',
        width: 250,
        flex: 4
    },
    {
        xtype: 'panel',
        title: 'Inner Panel Three',
        width: '50%',
        flex: 4
    }]
});

实例展示图：

 

    如开头所述，ExtJS4.x中一共有17中布局，这里仅仅介绍了其中的4中，在后面的学习和使用中会继续更新！

参考：ExtJS 官方文档http://docs.sencha.com/extjs/4.2.2/中布局、组件等文档