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

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

 

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

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

view source

01Ext.onReady(function() {

02            newExt.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进行配置，

代码如下：

view source

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           varpnWest = newExt.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           varpnCenter = newExt.TabPanel({

23               region:'center',

24               activeTab: 0,

25               items: [{

26                   title:'主页',

27                   authHeight:true,

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

29                   html:'主页内容'

30               }]

31           });

32           varpnSouth = newExt.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           varvp = new Ext.Viewport({

41               layout:"border",

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

43           });

最终实现的效果图如下：

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

 

注：文章由CoderMan原创，转载请说明出处：CoderMan官方主页