border(邊界) 布局是指，把面板組件顯示在 北 東 南 西 中 的哪個(gè)區(qū)域。
center 區(qū)域的面板是不能夠少的。
1. index.html
在導(dǎo)入ExtJS CSS + JS 后 增加以下
1?
<head>
2?
3?
<script?type="text/javascript"?src="js/LayoutBorder.js"></script>
4?
</head> 2.
LayoutBorder.js
?1?Ext.ns("alex.extjs.layout");
?2?
?3?alex.extjs.layout.PrettyPanel?=?function(){
?4?????
?5?????//Ext.QuickTips.init();????//初始化快速提示
?6?????
?7?????var?northPanel?=?new?Ext.Panel({
?8?????????region:?'north',????//指定在北部
?9?????????title:?'北部面板',????//面板標(biāo)題
10?????????height:?80,????//指定高度
11?????????collapsible:?true,????//可以折疊
12?????????frame:?true,
13?????????html:?'<center>可折疊面板</center>'
14?????});
15?
16?????var?eastPanel?=?new?Ext.Panel({
17?????????region:?'east',????????//指定在東部
18?????????title:?'東部面板',
19?????????width:?100,
20?????????split:?true,????//可調(diào)高/寬度
21?????????minSize:?80,????//最小高/寬度
22?????????maxSize:?400,????//最大高/寬度
23?????????html:?'可調(diào)寬度面板'
24?????});
25?????
26?????
27?????var?southPanel?=?new?Ext.Panel({
28?????????region:?'south',
29?????????//title:?'南部面板',
30?????????height:?80,
31?????????collapseMode:?'mini',?//折疊后是窄邊框
32?????????split:?true,????//可調(diào)高/寬度
33?????????minSize:?40,????//最小高/寬度
34?????????maxSize:?200,????//最大高/寬度
35?????????frame:?true,
36?????????html:?'<center>可折疊(窄邊框)?+?可調(diào)寬度面板</center>'
37?????});
38?
39?????var?westPanel?=?new?Ext.Panel({
40?????????title:?'西部面板',
41?????????region:?'west',
42?????????split:?true,
43?????????collapsible:?true,
44?????????collapseMode:?'mini',
45?????????margins:?'0?0?0?5',?//當(dāng)前組件的西邊頁邊距為5
46?????????width:?200,
47?????????html:?'有標(biāo)題?+?可折疊(窄邊框)?+?可調(diào)寬度面板'
48?????});
49?
50?????var?centerPanel?=?new?Ext.Panel({
51?????????region:?'center',????//邊界布局,必須有?center
52?????????html:?''
53?????});
54?
55?????var?viewport?=?new?Ext.Viewport({????????//生成一個(gè)?ExtJS?視窗?組件對象
56?????????renderTo:?Ext.getBody(),????//呈現(xiàn)在?Html?Body標(biāo)簽中
57?????????layout:?'border',????//使用邊界布局
58?????????items:[northPanel,?eastPanel,?southPanel,?westPanel,?centerPanel]
59?????});
60?}
61?
62?Ext.onReady(alex.extjs.layout.PrettyPanel);
3效果圖
