ExtJs4 筆記（14） layout 佈局
做者：李盼（Lipan）
出處：[Lipan] （http://www.cnblogs.com/lipan/）
版權聲明：本文的版權歸做者與博客園共有。轉載時須註明本文的詳細連接，不然做者將保留追究其法律責任。javascript
本篇講解Ext另外一個重要的概念：佈局。通常的容器類控件都是經過配置項items添加子控件的，這些子控件相對於父控件怎麼定位呢，這裏就要用到佈局。某些容器類控件，它自己默認就集成了一種佈局方式，例如比較典型的是：Ext.container.Viewport 佈局控件，它其實就是一個border佈局的容器，還有Ext.form.Panel、Ext.tab.Panel等。本節咱們系統的分析各類佈局方式。html
1、absolute
這種方式的佈局能夠對子元素相對於父級容器控件進行絕對定位，它包含了x、y兩個配置項用於定位。java
咱們來看看一個例子：佈局
[Js]flex
|
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
}]
});
|
效果以下：ui
2、accordion
有的js插件裏面accordion都是一個ui控件，可是Ext是經過佈局的方式實現的，咱們能夠用面板控件做爲它的摺疊項，而且還能夠用js來翻動活動項。this
[Js]spa
|
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
);
}
});
|
效果以下：插件
3、anchor
這個佈局就是表單面板默認支持的，每一項佔據一行，支持用anchor配置項分配各個子項的高度和寬度。爲百分比時表示當前大小佔父容器的百分比，爲數字的時通常爲負數，表示父容器的值減去差值，剩下的爲子項的大小。3d
[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%'
}]
});
|
效果以下：
4、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
}]
});
|
效果以下：
5、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])
}]
});
|
效果以下：
6、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'
}]
}]
});
|
效果以下：
7、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
}]
});
|
效果以下：
8、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'
}
]
});
|
效果以下：
9、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
}]
});
|
效果以下：
10、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'
}]
});
|
效果以下：
相關文章
- 1. ExtJs4 筆記之 layout 佈局
- 2. ExtJs4 layout 佈局
- 3. Extjs4 佈局 layout 詳解
- 4. ExtJs4.X之Viewport佈局
- 5. Xamarin 學習筆記 - Layout（佈局）
- 6. Android學習筆記——Layout佈局（三）
- 7. Ext 佈局（layout）
- 8. Extjs layout佈局
- 9. Layout（佈局）
- 10. EXTJS4之table佈局 陰影特效
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
