本篇讲解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
|
//absoluteExt.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
|
//accordionExt.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
|
//anchorExt.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
|
//borderExt.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
|
//cardvar 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
|
//columnExt.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
|
//fitExt.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
|
//tableExt.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
|
//vboxExt.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
|
//hboxExt.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 layout 布局 这是鄙人之前自学Ext时收集的文档，详细讲诉了各种布局，并附源码与界面展示，希望能给你带来帮助
用extjs4搭的一个简单布局框架
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
NULL 博文链接：https://jellen129.iteye.com/blog/717728
折叠布局Ext.layout.AnchorLayout 边框布局Ext.layout.BorderLayout 卡片式布局Ext.layout.CardLayout 列布局Ext.layout.ColumnLayout 填充布局xt.layout.FitLayout 表单布局Ext.layout.FormLayout 表格布局Ext....
一、 Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。 hideLabels：tru表示隐藏标签，默认为false。 ...
NULL 博文链接：https://huiqinbo.iteye.com/blog/2217105
ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息，如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到...
目录 第一章 ExtJs大比拼JQuery：...第十四章 layout 布局 138 一、absolute 138 二、accordion 140 三、anchor 142 四、border 144 五、card 146 六、column 148 七、fit 150 八、table 151 九、vbox 152 十、hbox 154
Layout的各种方法以及数据如何加载，和其他数据之间的融合使用
经常用到上下左右，中间填充满这样的布局，在java swing中有BorderLayout，HTML中通常使用CSS来实现布局，但要实现border layout这样的效果有些麻烦，很多第三方实现，比如easyui, extjs，功能过于强大，我只是想要...
前端项目-jquery-layout,布局管理的jquery插件（extjs border layout的jquery版本）。
一、Table布局由类Ext.layout.TableLayout定义，类以于html中的table，可以对行或列进行合并。 layoutConfig使用columns指定父容器分成3列， rowspan合并行数目。 colspan合并列数目。 二、应用举例 代码如下: Ext....
11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout ...
layout:”column” Panel进行列布局。 在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。 columnWidth表示使用百分比的形式指定列宽度。 width则是使用绝对象素的方式指定列宽度，在实际应用中可以...
ExtJs的详细介绍， 第一章 起步 第二章 Ext概览 第三章 表单 第四章 按钮、菜单和工具栏 第五章 使用grid显示数据 第六章 Editor Grids（可编辑表格） 第七章 layout（布局） 第八章 Tree(树)
extjs6 mvc demo，包含页面布局，tabPanel，点击事件等
发现目前网上 ext layout 例子虽然各项功能可以实现但是无法应用到真实项目中 因为大部分例子其中的各组件是静态写成的 只是动态的通过对象名调用 实际开发中各组件多为动态生成 因为即时数据：不能定义对象名...
适合企业级开发，能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯javascript代码开发。 真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid，有完整地说明文档。
一、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素...