border(边界) 布局是指，把面板组件显示在 北 东 南 西 中 的哪个区域。
center 区域的面板是不能够少的。
1. index.html
在导入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: '北部面板', //面板标题
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, //可调高/宽度
21 minSize: 80, //最小高/宽度
22 maxSize: 400, //最大高/宽度
23 html: '可调宽度面板'
24 });
25
26
27 var southPanel = new Ext.Panel({
28 region: 'south',
29 //title: '南部面板',
30 height: 80,
31 collapseMode: 'mini', //折叠后是窄边框
32 split: true, //可调高/宽度
33 minSize: 40, //最小高/宽度
34 maxSize: 200, //最大高/宽度
35 frame: true,
36 html: '<center>可折叠(窄边框) + 可调宽度面板</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', //当前组件的西边页边距为5
46 width: 200,
47 html: '有标题 + 可折叠(窄边框) + 可调宽度面板'
48 });
49
50 var centerPanel = new Ext.Panel({
51 region: 'center', //边界布局,必须有 center
52 html: ''
53 });
54
55 var viewport = new Ext.Viewport({ //生成一个 ExtJS 视窗 组件对象
56 renderTo: Ext.getBody(), //呈现在 Html Body标签中
57 layout: 'border', //使用边界布局
58 items:[northPanel, eastPanel, southPanel, westPanel, centerPanel]
59 });
60 }
61
62 Ext.onReady(alex.extjs.layout.PrettyPanel);
3效果图
