ExtJS 4.2 教程-08:布局系统详解

  1. 云栖社区>
  2. 博客列表>
  3. 正文

ExtJS 4.2 教程-08:布局系统详解

shy丶gril 2016-05-23 15:15:18 浏览934 评论0

摘要: ExtJS 4.2 系列教程导航目录: ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程-02:bootstrap.js 工作方式 ExtJS 4.2 教程-03:使用Ext.define自定义类 ExtJS 4.2 教程-04:数据模型 ExtJS 4.2 教程-05:客户端代理(proxy) ExtJS 4.2 教程-06:服务器代理(proxy) ExtJS 4.2 教程-07:Ext.Direct ExtJS 4.2 教程-08:布局系统详解 今天我们来对ExtJS 4.2 的布局(Layout)进行一次系统的学习。

ExtJS 4.2 系列教程导航目录:

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

image

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

Auto Layout

image

Auto Layout 是ExtJS 容器的默认布局,当我们定义一个panel的时候,如果没有指定panel的布局,那么它就会使用Auto Layout来组织子元素。

Auto Layout 的用法(查看在线演示):

var panel = Ext.create("Ext.panel.Panel", {
    title: "Auto Layout",
    width: 500,
    height: 400,
    items: [
        { xtype: "panel", title: "第一个子Panel", width: 200, height: 100 },
        { xtype: "panel", title: "第二个子Panel", width: 150, height: 100 },
        { xtype: "textfield", width: 300, fieldLabel: "请输入用户名" }
    ],
    renderTo: "container"
});

Auto Layout 本身不包含任何特殊的布局功能,它只是提供了一种调用子元素布局系统的通道。

Anchor Layout

image

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

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

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

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

Anchor Layout 用法(查看在线演示):

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

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

Absolute Layout 用法(查看在线演示):

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

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

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

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

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

Column Layout 用法(查看在线演示):

// 所有列都是百分比,他们的和加起来为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

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

虽然Border布局看上去比较麻烦,但用起来却非常简单(查看在线示例):

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

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

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

Accordion Layout 的使用非常普遍,我们来一个简单的示例(查看在线示例):

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

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

示例代码如下(查看在线示例):

var navigate = function (panel, direction) {
    var layout = panel.getLayout();
    layout[direction]();
    Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
    Ext.getCmp('move-next').setDisabled(!layout.getNext());
};

var panel = Ext.create('Ext.panel.Panel', {
    title: '示例向导,
    x: 50,
    y: 50,
    width: 300,
    height: 200,
    layout: 'card',
    bodyStyle: 'padding:15px',
    defaults: {
        border: false
    },
    bbar: [
        {
            id: 'move-prev',
            text: '上一步',
            handler: function (btn) {
                navigate(btn.up("panel"), "prev");
            },
            disabled: true
        },
        '->',
        {
            id: 'move-next',
            text: '下一步',
            handler: function (btn) {
                navigate(btn.up("panel"), "next");
            }
        }
    ],
    items: [{
        id: 'card-0',
        html: '<p>第一步</p>'
    }, {
        id: 'card-1',
        html: '<p>第二步</p>'
    }, {
        id: 'card-2',
        html: '<p>第三步</p>'
    }],
    renderTo: "container"
});

Fit Layout

image

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

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

Fit Layout 示例代码(查看在线示例):

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

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

示例代码如下(查看在线示例):

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

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

示例代码如下(查看在线示例):

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

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

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

示例代码如下(查看在线示例):

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

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

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

示例代码如下(查看在线示例):

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

本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作。

如果认为此文对您有帮助,别忘了支持一下哦!

作者:齐飞
声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

转载:http://www.cnblogs.com/youring2/p/extjs-course-8-Ext-Layout.html 
【云栖快讯】阿里云栖开发者沙龙(Java技术专场)火热来袭!快来报名参与吧!  详情请点击

网友评论