作者：李盼（Lipan）
出处：[Lipan] （http://www.cnblogs.com/lipan/）
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。

本篇讲解Ext另一个重要的概念：布局。一般的容器类控件都是通过配置项items添加子控件的，这些子控件相对于父控件怎么定位呢，这里就要用到布局。某些容器类控件，它本身默认就集成了一种布局方式，例如比较典型的是：Ext.container.Viewport 布局控件，它其实就是一个border布局的容器，还有Ext.form.Panel、Ext.tab.Panel等。本节我们系统的分析各种布局方式。

一、absolute

这种方式的布局可以对子元素相对于父级容器控件进行绝对定位，它包含了x、y两个配置项用于定位。

我们来看看一个例子：

[Js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//absolute
Ext.create('Ext.Panel', {
    title: '容器面板',
    renderTo: 'div1',
    width: 400,
    height: 300,
    layout: 'absolute',
    items: [{
        title: '面板1',
        xtype: "panel",
        html: "子元素1",
        width: 200,
        height: 100,
        x: 50,
        y: 50
 
    }, {
        title: '面板2',
        xtype: "panel",
        html: "子元素2",
        width: 200,
        height: 100,
        x: 100,
        y: 80
 
    }]
});

效果如下：

二、accordion

有的js插件里面accordion都是一个ui控件，但是Ext是通过布局的方式实现的，我们可以用面板控件作为它的折叠项，并且还可以用js来翻动活动项。

[Js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//accordion
Ext.create('Ext.Panel', {
    title: '容器面板',
    renderTo: 'div2',
    width: 400,
    height: 300,
    layout: 'accordion',
    items: [{
        tools: [{ type: 'gear', handler: function () {
            Ext.Msg.alert('提示', '配置按钮被点击。');
        }
        }, { type: 'refresh'}],
        title: '面板1',
        xtype: "panel",
        html: "子元素1"
 
    }, {
        title: '面板2',
        xtype: "panel",
        html: "子元素2"
    }, {
        id: 'panel3',
        title: '面板3',
        xtype: "panel",
        html: "子元素3"
    }]
});
Ext.create("Ext.Button", {
    renderTo: 'div2',
    text: "打开第三页",
    handler: function () {
        Ext.getCmp('panel3').expand(true);
    }
});

效果如下：

三、anchor

这个布局就是表单面板默认支持的，每一项占据一行，支持用anchor配置项分配各个子项的高度和宽度。为百分比时表示当前大小占父容器的百分比，为数字的时一般为负数，表示父容器的值减去差值，剩下的为子项的大小。

[Js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//anchor
Ext.create('Ext.Panel', {
    title: '容器面板',
    renderTo: 'div3',
    width: 400,
    height: 300,
    layout: 'anchor',
    items: [{
        tools: [{ type: 'gear', handler: function () {
            Ext.Msg.alert('提示', '配置按钮被点击。');
        }
        }, { type: 'refresh'}],
        title: '面板1',
        xtype: "panel",
        html: "子元素1",
        anchor: '80% 20%'
 
    }, {
        title: '面板2',
        xtype: "panel",
        html: "子元素2",
        anchor: '-50 -200'
    }, {
        title: '面板3',
        xtype: "panel",
        html: "子元素3",
        anchor: '100% 30%'
    }]
});

效果如下：

四、border

这个布局可以定义东南西北四个方向的子元素，还有一个居中的子元素，一般用它来做页面整页布局，所以Ext.container.Viewport默认就支持了这个布局方式。

[Js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//border
Ext.create('Ext.Panel', {
    title: '容器面板',
    renderTo: 'div4',
    width: 400,
    height: 300,
    layout: 'border',
    defaults: {
        split: true,                 //是否有分割线
        collapsible: true,           //是否可以折叠
        bodyStyle: 'padding:15px'
    },
    items: [{
        region: 'north',            //子元素的方位：north、west、east、center、south
        title: '北',
        xtype: "panel",
        html: "子元素1",
        height: 70
    }, {
        region: 'west',
        title: '西',
        xtype: "panel",
        html: "子元素2",
        width: 100
 
    }, {
        region: 'east',
        title: '东',
        xtype: "panel",
        html: "子元素2",
        width: 100
 
    }, {
        region: 'center',
        title: '主体',
        xtype: "panel",
        html: "子元素3"
    }, {
        region: 'south',
        title: '南',
        xtype: "panel",
        html: "子元素4",
        height: 70
    }]
});

效果如下：

五、card

这个布局可以像卡片一样的切换每个子元素，各个子元素都会独占父元素的容器空间。我们可以定义翻页按钮来控制当前处于活动状态的子元素。

[Js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//card
var cardNav = function (incr) {
    var l = Ext.getCmp('cardPanel').getLayout();
    var i = l.activeItem.id.split('card')[1];
    var next = parseInt(i, 10) + incr;
    l.setActiveItem(next);
    Ext.getCmp('cardPrev').setDisabled(next === 0);
    Ext.getCmp('cardNext').setDisabled(next === 2);
};
Ext.create('Ext.Panel', {
    title: '容器面板',
    renderTo: 'div5',
    width: 400,
    height: 300,
    layout: 'card',
    activeItem: 1,                  //默认活动项
    id: 'cardPanel',
    items: [{
        id: 'card0',
        title: '面板1',
        xtype: "panel",
        html: "子元素1"
 
    }, {
        id: 'card1',
        title: '面板2',
        xtype: "panel",
        html: "子元素2"
    }, {
        id: 'card2',
        title: '面板3',
        xtype: "panel",
        html: "子元素3"
    }],
    bbar: ['->', {
        id: 'cardPrev',
        text: '« 前一页',
        handler: Ext.Function.bind(cardNav, this, [-1])
    }, {
        id: 'cardNext',
        text: '后一页 »',
        handler: Ext.Function.bind(cardNav, this, [1])
    }]
 
});

效果如下：

六、column

这个布局把子元素按照列进行划分。

[Js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//column
Ext.create('Ext.Panel', {
    title: '容器面板',
    renderTo: 'div6',
    width: 400,
    height: 300,
    layout: 'column',
    defaults: {                     //设置没一列的子元素的默认配置
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        }
    },
    items: [{
        columnWidth: 4 / 10,        //设置列的宽度
        items: [{
            title: '面板1',
            border: false,
            html: '子元素1'
        }, {
            title: '面板2',
            border: false,
            html: '子元素2'
        }]
    }, {
        width: 120,
        items: [{
            title: '面板3',
            border: false,
            html: '子元素3'
        }]
    }, {
        columnWidth: .40,
        items: [{
            title: '面板4',
            border: false,
            html: '子元素4'
        }]
    }]
 
});

效果如下：

七、fit

这个布局下子元素会独占全部的容器空间，一般用于只有一个子项的情况。

[Js]

1
2
3
4
5
6
7
8
9
10
11
12
13
//fit
Ext.create('Ext.Panel', {
    title: '容器面板',
    renderTo: 'div7',
    width: 400,
    height: 300,
    layout: 'fit',
    items: [{
        title: '面板',
        html: '子元素',
        border: false
    }]
});

效果如下：

八、table

这个布局用表格定位的方式去组织子元素，我们可以像表格一样设置rowspan和colspan。

[Js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//table
Ext.create('Ext.Panel', {
    title: '容器面板',
    renderTo: 'div8',
    width: 400,
    height: 300,
    layout: {
        type: 'table',
        columns: 4
    },
    defaults: { frame: true, width: 70, height: 50 },
    items: [
        { html: '元素1', rowspan: 3, height: 150 },
        { html: '元素2', rowspan: 2, height: 100 },
        { html: '元素3' },
        { html: '元素4' },
        { html: '元素5', colspan: 2, width: 140 },
        { html: '元素6' },
        { html: '元素7' },
        { html: '元素8' }
    ]
});

效果如下：

九、vbox

这个布局把所有的子元素按照纵向排成一列。

[Js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//vbox
Ext.create('Ext.Panel', {
    title: '容器面板',
    renderTo: 'div9',
    width: 400,
    height: 300,
    layout: {
        type: 'vbox',
        pack: 'start',              //纵向对齐方式 start：从顶部；center：从中部；end：从底部
        align: 'stretchmax'             //对齐方式 center、left、right：居中、左对齐、右对齐；stretch：延伸；stretchmax：以最大的元素为标准延伸
    },
    defaults: {
        xtype: 'button'
    },
    items: [{
        text: '小按钮',
        flex: 1                      //表示当前子元素尺寸所占的均分的份数。
    }, {
        xtype: 'tbspacer',          //插入的空填充
        flex: 3
    },
 
    {
        text: '中按钮',
        scale: 'medium'
    }, {
        text: '大按钮',
        width: 120,
        scale: 'large',
        flex: 1
    }]
});

效果如下：

十、hbox

跟vbox类似，只不过变成了横向的。

[Js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//hbox
Ext.create('Ext.Panel', {
    title: '容器面板',
    renderTo: 'div10',
    width: 400,
    height: 300,
    layout: {
        type: 'hbox',
        pack: 'end',
        align: 'middle'             //对齐方式 top、middle、bottom：顶对齐、居中、底对齐；stretch：延伸；stretchmax：以最大的元素为标准延伸
    },
    defaults: {
        xtype: 'button'
    },
    items: [{
        text: '小按钮'
    },{
        text: '中按钮',
        scale: 'medium'
    }, {
        text: '大按钮',
        width: 120,
        scale: 'large'
    }]
});

效果如下：

ExtJs4 笔记（14） layout 布局的更多相关文章

  1. Android学习笔记(14):相对布局RelativeLayout

    相对布局RelativeLayout,继承自ViewGroup.相对布局的子组件的位置总是相对于兄弟组件或者父容器决定的. RelativeLayout支持的XML属性: android:gravit ...

  2. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  3. ExtJs4 笔记（4） Ext.XTemplate 模板

    ExtJs4 笔记(4) Ext.XTemplate 模板 摘自:http://www.cnblogs.com/lipan/ 本篇将涉及到ExtJs中一个重要的概念,模板.话说Razor很神奇,但是我 ...

  4. Android 布局学习之——Layout(布局)具体解释二（常见布局和布局參数）

     [Android布局学习系列]   1.Android 布局学习之--Layout(布局)具体解释一   2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数)   ...

  5. Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

  6. 新建android工程的时候eclipse没有生成MainActivity和layout布局

    一.新建android工程的时候eclipse没有生成MainActivity和layout布局 最近由于工作上的原因,开始学习Android开发,在入门的时候就遇到了不少的坑,遇到的第一个坑就是&q ...

  7. Ext.Net学习笔记14：Ext.Net GridPanel Grouping用法

    Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法 Ext.Net GridPanel可以进行Group操作,例如: 如何启用Grouping功能呢?只需要在Grid ...

  8. layout布局实例化

    实例化xml中的Layout布局在开发中经常会用到,有几种方法可以使用 1.在Activity中使用getLayoutInflater()方法 View layout = getLayoutInfla ...

  9. ASP.NET MVC3 系列教程 – 新的Layout布局系统

    原文地址:http://www.cnblogs.com/highend/archive/2011/04/18/asp_net_mvc3_layout.html I:回忆MVC2当中MasterPage ...

  10. WPF笔记(1.4 布局)——Hello，WPF！

    原文:WPF笔记(1.4 布局)--Hello,WPF! 这一节只是第2章的引子.布局要使用Panel控件,有四种Panel,如下:DockPanel,就是设置停靠位置布局模型.StackPanel, ...

随机推荐

  1. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  2. 站长必备：10个好用的 WordPress 备份插件

    网站备份对于站长来说极其重要的.任何的事情都可能发生,这可能会导致你失去所有的辛勤工作:您的网站可能被黑客攻破,你可以安装一个了插件导致冲突,你的服务器可能被攻击,你可能在编辑文件时犯了一个错误等等, ...

  3. jQuery的eq方法

    定义和用法eq() 方法将匹配元素集缩减值指定 index 上的一个. 语法.eq(index) 其中的index :整数,指示元素的位置(最小为 0).如果是负数,则从集合中的最后一个元素往回计数. ...

  4. 如何判断一个js对象是否一个DOM对象

    我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有D ...

  5. RT-Thread入门和模拟器的配置生成

    RT-Thread是一个国产开源的实时操作系统,支持MCU多,外设丰富.值得学习 下载地址:http://www.rt-thread.org/page/31.html ,解压可以得到一下目录结构:|- ...

  6. 关于Android Force Close 出现的原因 以及解决方法

    一.原因: forceclose,意为强行关闭,当前应用程序发生了冲突. NullPointExection(空指针),IndexOutOfBoundsException(下标越界),就连Androi ...

  7. Android App 开发技能图谱

    操作系统 Windows/MacOSX/Linux 编程语言 Java HTML/JS (Hybrid/Web App) C/C++ (NDK) SQL (DB) Kotlin 开发工具 IDE An ...

  8. iOS开发和localStorage/sessionStorage

    一.前言 在近期的工作中,有前端同学告诉我要清除localStorage,我当时对localStorage完全没有概念,所以就在w3c看了一下相关的内容,下面简单的介绍一下.算是对iOS开发者普及H5 ...

  9. Mac终端常见命令

    Mac的使用 1.Finder资源管理器 Mac的硬盘不分区,只有一个根目录 2.系统偏好设置-控制面板 快捷键: 1.win下面的快捷键由ctrl换成common开头: commond+space ...

  10. Sandcastle----强大的C#文档生成工具

    最近客户索要产品的二次开发类库文档,由于开发过程中并没有考虑过此类文档,而且项目规范比较,持续时间比较长,经手人比较多,还真是麻烦,如果人工制作文档需要是一个比较大的工程.还好有这个文档生成工具,能够 ...