ExtJS4.X Boder 布局实现系统页面框架

想象下咱们平时使用的管理系统，一般都是一个header，一个footer，一个菜单和一个页面呈现区，传统DIV布局实现起来也不是困难的事情，不过既然用到了ExtJS，那不妨来感受下ExtJS布局的强大。

关于Boder布局， 基本分为几块，头部的north，底部的south，左边的west，右边的east，中间的center，ExtJS使用地图的形式来标示这几块区域。不废话，直接上代码了。

01	Ext.onReady(function () {

02	new Ext.Viewport({

03	layout: "border",

04

items: [

05	{ region: "north", title: "头部", height: 50 },

06	{ region: "south", title: "底部", height: 50 },

07	{ region: "west", title: "菜单", width: 200 },

08	{ region: "east", title: "操作", width: 200 },

09	{ region: "center", title: "呈现" }

10

]

11

});

12

13

});

上面这段简短的代码最终实现的效果如下图：

是不是很给力，简短的几句JS实现了往Body里渲染了如此的界面。

这样当然还不够，我们可以针对Viewport里面的每个Item进行配置，代码如下：

01	var pnNorth = new Ext.Panel({

02	id: 'pnNorth',

03	autoWidth: true,

04	heigth: 200,

05	frame: true,

06	region: 'north',

07	html: '页头的html'

08

});

09	var pnWest = new Ext.Panel({

10	id: 'pnWest',

11	title: '菜单项',

12	width: 200,

13	heigth: 'auto',

14	split: true, //显示分隔条

15	region: 'west',

16	collapsible: true,

17

layout: {

18	type: 'accordion', //伸缩菜单布局

19	animate: true//展开伸缩使用动画效果

20

}

21

});

22	var pnCenter = new Ext.TabPanel({

23	region: 'center',

24	activeTab: 0,

25

items: [{

26	title: '主页',

27	authHeight: true,

28	closable: true, //是否可关闭

29	html: '主页内容'

30

}]

31

});

32	var pnSouth = new Ext.Panel({

33	id: 'pnSouth',

34	autoWidth: true,

35	heigth: 200,

36	frame: true,

37	region: 'south',

38	html: '<div id="footer" style="margin:0 auto;text-align:center"><span >CoderMan版权所有 © 2013-2014</span></div>'

39

});

40	var vp = new Ext.Viewport({

41	layout: "border",

42	items: [pnNorth, pnSouth, pnWest, pnCenter]

43

});

最终实现的效果图如下：

好吧，ExtJS布局相当之强大大家已经感受到了。

文章发布在:http://www.coderman.cn