本篇講解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'
}]
}); |
效果如下: