ExtJS4-布局系统详解

古城微笑少年丶 2022-09-23 10:54 200阅读 0赞

今天我们来对ExtJS 4.2 的布局（Layout）进行一次系统的学习。在ExtJS 4.2中，提供了十几种布局，我们可以在api中看到：

![image][]

在这些布局中，我们常用的有Accordion、Border、Column、Fit、Form等。下面我们来看一下具体的用法。

## Anchor Layout ##

![image][image 1]

Anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。

AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。

Anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如：

*  anchor:'75% 25%'，表示宽度为父容器的75%，高度为父容器的25%
 *  anchor:'-295 -300'，表示组件相对于父容器右边距为295，相对于父容器的底部位300
 *  anchor:'-250 10%'，混合模式，表示组件相对于如容器右边为250，高度为父容器的10%

Anchor Layout 用法（[查看在线演示][Link 1]）：

var panel = Ext.create("Ext.panel.Panel", {
        width: 500,
        height: 400,
        title: "Anchor布局",
        layout: "anchor",
        x: 60,
        y: 80,
        renderTo: "container",
        items: [
            { xtype: 'panel', title: '75% Width and 25% Height', anchor: '75% 25%' },
            { xtype: 'panel', title: 'Offset -300 Width & -200 Height', anchor: '-295 -300' },
            { xtype: 'panel', title: 'Mixed Offset and Percent', anchor: '-250 10%' }
        ]
    });

## Absolute Layout ##

![image][image 2]

Absolute Layout 继承自 Anchor Layout，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用。

Absolute Layout 用法（[查看在线演示][Link 2]）：

Ext.create('Ext.form.Panel', {
        title: 'Absolute Layout',
        width: 400,
        height: 275,
        layout: 'absolute',
        url: 'save-form.php',
        defaultType: 'textfield',
        items: [
            { x: 10, y: 10, xtype: 'label', text: 'Send To:' },
            { x: 80, y: 10, name: 'to', anchor: '90%' },
            { x: 10, y: 40, xtype: 'label', text: 'Subject:' },
            { x: 80, y: 40, name: 'subject', anchor: '90%' },
            { x: 0, y: 80, xtype: 'textareafield', name: 'msg', anchor: '100% 100%' }
        ],
        renderTo: 'container'
    });

## Column Layout ##

![image][image 3]

Column 布局用来创建一个多列的布局格式，列宽度可以使用像素值或百分比。

Column布局支持一个columnWidth属性，在布局过程中，使用columnWidth指定每个面板的宽度的百分比，他们的和加起来为1。

columnWidth和width可混合使用，这个时候系统将减去width占用的宽度，然后再根据百分比计算列的宽度。

另外，如果任何子面板没有指定columnWidth值，那么它将占满剩余的空间。

Column Layout 用法（[查看在线演示][Link 3]）：

// 所有列都是百分比，他们的和加起来为1
    Ext.create('Ext.panel.Panel', {
        title: 'Column Layout',
        width: 350,
        height: 250,
        layout: 'column',
        items: [{
            title: 'Column 1',
            columnWidth: 0.25
        }, {
            title: 'Column 2',
            columnWidth: 0.55
        }, {
            title: 'Column 3',
            columnWidth: 0.20
        }],
        renderTo: "container"
    });
    
    // width和columnWidth混合使用
    Ext.create('Ext.Panel', {
        title: 'Column Layout - Mixed',
        width: 350,
        height: 250,
        layout: 'column',
        items: [{
            title: 'Column 1',
            width: 120
        }, {
            title: 'Column 2',
            columnWidth: 0.7
        }, {
            title: 'Column 3',
            columnWidth: 0.3
        }],
        renderTo: "container"
    });

## Border Layout ##

![image][image 4]

Border 布局将界面分为上下左右中五个区域，分别用north、south、west、east、center来表示，它的每个子项用region指定元素的位置。

虽然Border布局看上去比较麻烦，但用起来却非常简单（[查看在线示例][Link 4]）：

var panel = Ext.create("Ext.panel.Panel", {
        width: 500,
        height: 300,
        title: 'Border Layout',
        layout: 'border',
        items: [{
            title: 'South Region (可调整大小)',
            region: 'south',     // 所在的位置
            xtype: 'panel',
            height: 100,
            split: true,         // 允许调整大小
            margins: '0 5 5 5'
        }, {
            title: 'West Region (可折叠/展开)',
            region: 'west',
            xtype: 'panel',
            margins: '5 0 0 5',
            width: 200,
            collapsible: true,   // 可折叠/展开
            id: 'west-region-container',
            layout: 'fit'
        }, {
            title: 'Center Region (必须)',
            region: 'center',     // 必须指定中间区域
            xtype: 'panel',
            layout: 'fit',
            margins: '5 5 0 0'
        }],
        renderTo: "container"
    });

## Accordion Layout ##

![image][image 5]

Accordion Layout 是将其子元素以手风琴的效果显示。

它的子元素必须是panel，或者panel的子类。

Accordion Layout 的使用非常普遍，我们来一个简单的示例（[查看在线示例][Link 5]）：

var panel = Ext.create("Ext.panel.Panel", {
        title: "Accordion Layout",
        width: 300,
        height: 300,
        defaults: {
            // 应用到所有子panel
            bodyStyle: 'padding:15px'
        },
        layout: {
            // 布局配置
            type: 'accordion',
            titleCollapse: false,
            animate: true,
            activeOnTop: true
        },
        items: [{
            title: 'Panel 1',
            html: 'Panel content!'
        }, {
            title: 'Panel 2',
            html: 'Panel content!'
        }, {
            title: 'Panel 3',
            html: 'Panel content!'
        }],
        renderTo: "container"
    });

## Card Layout ##

![image][image 6]

Card 布局是一种向导试的布局方式，它在显示的时候，本身是没有上一步、下一步按钮的，但提供了上一步、下一步的操作方法，我们需要在界面中添加导航按钮来配合实际的业务需要。

示例代码如下（[查看在线示例][Link 6]）：

## Fit Layout ##

![image][image 7]

Fit Layout 是很常用的一种布局，在Fit布局中，子元素将自动填满整个父容器。

在Fit 布局下，对其子元素设置宽度是无效的。如果在Fit 布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。

Fit Layout 示例代码（[查看在线示例][Link 7]）：

var panel = Ext.create("Ext.panel.Panel", {
        title: 'Fit Layout',
        x: 30,
        y: 30,
        width: 300,
        height: 150,
        layout: 'fit',
        items: {
            title: '内部Panel',
            html: '内部Panel 的内容',
            bodyPadding: 20,
            border: false
        },
        renderTo: "container"
    });

## Form Layout ##

![image][image 8]

Form Layout 用来组织表单字段的，Form Layout 下的表单字段会被拉伸到表单的宽度。

示例代码如下（[查看在线示例][Link 8]）：

var panel = Ext.create("Ext.panel.Panel", {
        width: 350,
        height: 240,
        title: "FormLayout Panel",
        layout: 'form',
        bodyPadding: 5,
        defaultType: 'textfield',
        items: [{
            fieldLabel: '姓名',
            name: 'name',
            allowBlank: false
        }, {
            fieldLabel: '公司',
            name: 'company'
        }, {
            fieldLabel: 'Email',
            name: 'email',
            vtype: 'email'
        }, {
            fieldLabel: '年龄',
            name: 'age',
            xtype: 'numberfield',
            minValue: 0,
            maxValue: 100
        }],
        renderTo: "container"
    });

## Table Layout ##

![image][image 9]

Table Layout 将内容绘制在table标签中，table的列数可以指定，还可以通过设置rowSpan和colSpan来创建复杂的布局。

示例代码如下（[查看在线示例][Link 9]）：

var panel = Ext.create("Ext.panel.Panel", {
        title: 'Table Layout',
        width: 300,
        height: 150,
        layout: {
            type: 'table',
            // 列数
            columns: 3
        },
        defaults: {
            bodyStyle: 'padding:20px'
        },
        items: [{
            html: 'Cell A content',
            rowspan: 2  //占用两行
        }, {
            html: 'Cell B content',
            colspan: 2  //占用两列
        }, {
            html: 'Cell C content',
            cellCls: 'highlight'
        }, {
            html: 'Cell D content'
        }],
        renderTo: "container"
    });

## Box Layout ##

Box Layout 是HBox Layout 和 VBox Layout 的父类，一般不会直接用到。

### HBox Layout ###

![image][image 10]

HBox Layout 将子元素放在同一水平位置，通过align设置子元素的对齐方式，对齐方式有：

*  top : 默认的对其方式，顶部对齐
 *  middle : 中间对齐
 *  bottom : 底部对齐
 *  stretch : 拉伸对齐，所有子元素根据父容器的高度拉伸
 *  stretchmax : 拉伸对齐，所有子元素根据子元素中最高的高度拉伸

示例代码如下（[查看在线示例][Link 10]）：

var panel = Ext.create("Ext.panel.Panel", {
        width: 500,
        height: 300,
        title: "HBoxLayout Panel",
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        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
        }],
        renderTo: "container"
    });

### VBox Layout ###

![image][image 11]

VBox Layout 以垂直的方式组织所有子元素。它的子元素可以通过align属性来设置对齐方式，vbox的对齐方式有：

*  left : 左对齐，默认对其方式
 *  center : 中间对齐
 *  right : 右对齐
 *  stretch : 以父容器的宽度拉伸对齐
 *  stretchmax : 以所有子元素中的最大宽度拉伸对齐

示例代码如下（[查看在线示例][Link 11]）：

var panel = Ext.create("Ext.panel.Panel", {
        width: 500,
        height: 400,
        title: "VBoxLayout Panel",
        layout: {
            type: 'vbox',
            align: 'center'
        },
        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
        }],
        renderTo: "container"
    });

[image]: http://www.qeefee.com/Upload/wlw/4750864018369810732.png
[image 1]: http://www.qeefee.com/Upload/wlw/5348006481490467958.png
[Link 1]: http://www.qeefee.com/examples/extjs-100-examples/layout/anchor
[image 2]: http://www.qeefee.com/Upload/wlw/5752362811181220694.png
[Link 2]: http://www.qeefee.com/examples/extjs-100-examples/layout/absolute
[image 3]: http://www.qeefee.com/Upload/wlw/5428817241710971824.png
[Link 3]: http://www.qeefee.com/examples/extjs-100-examples/layout/column
[image 4]: http://www.qeefee.com/Upload/wlw/5597753636939856958.png
[Link 4]: http://www.qeefee.com/examples/extjs-100-examples/layout/border
[image 5]: http://www.qeefee.com/Upload/wlw/4797590721379578753.png
[Link 5]: http://www.qeefee.com/examples/extjs-100-examples/layout/accordion
[image 6]: http://www.qeefee.com/Upload/wlw/5572849658065864579.png
[Link 6]: http://www.qeefee.com/examples/extjs-100-examples/layout/card
[image 7]: http://www.qeefee.com/Upload/wlw/5522351729794294770.png
[Link 7]: http://www.qeefee.com/examples/extjs-100-examples/layout/fit
[image 8]: http://www.qeefee.com/Upload/wlw/5027134529263336275.png
[Link 8]: http://www.qeefee.com/examples/extjs-100-examples/layout/form
[image 9]: http://www.qeefee.com/Upload/wlw/5024323576703313745.png
[Link 9]: http://www.qeefee.com/examples/extjs-100-examples/layout/table
[image 10]: http://www.qeefee.com/Upload/wlw/5688471469618555091.png
[Link 10]: http://www.qeefee.com/examples/extjs-100-examples/layout/hbox
[image 11]: http://www.qeefee.com/Upload/wlw/4974413221681318855.png
[Link 11]: http://www.qeefee.com/examples/extjs-100-examples/layout/vbox