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

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

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

01Ext.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进行配置，代码如下：

01var 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