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