Extjs4开发笔记三——菜单的实现.docVIP

Extjs4开发笔记(三)——菜单的实现 今天工作的主要内容就是菜单的实现以及点击菜单后在右边内容区打开一个新的Panel。本篇文章的内容主要包括两个方面，Extjs4 Tree及Extjs4 tabPanel。 在Extjs应用中实现菜单，无疑Tree是最好的选择，将菜单项直接写到Tree中，也未尝不可，但后期的维护会非常麻烦，那么最好的选择就是异步获取菜单节点，这样既有利于后期维护，也可以节省JS代码的编写量。 实现异步加载，那必须要有数据库和服务端程序。管理系统使用的是ACCESS数据库。在数据库中建立Menu表，表一共有4个字段，分别是ID、MenuName、ParentID和cls. ID：自增长类型 MenuName：代表菜单的名字。ParentID ParentID：父ID cls：样式名（这个需要在样式表中体现出来，才会有效果） 数据库有了，接下来就是服务端的编写，其实JS框架的好处在于服务端无论用什么都可以，这里我就使用ASP来实现了。由于服务端涉及的方面比较多，较多代码帖出来会比较乱，这里只说下返回的形式。 菜单需要的JSON数据格式如下： [{text:管理员管理,id:1,iconCls:manage,leaf:true}][{text:管理员管理,id:1,iconCls:manage,leaf:true}]这里注意一点：由于整棵菜单树都是异步获取的，所以节点并不需要递归，而树的node.id就是JSON数据中的ID。点击父节点展开子节点的时候，发送的数据也是node.id，这样正好解决获取子节点的问题。所有根节点的ParentID都为0。那么第一次加载菜单的时候，正好可以获取所有的根节点了。 重点，菜单树的数据源编写，根据MVC原则，在app目录下建立store文件夹，这个文件夹下放置所有的获取数据的js文件，在store文件夹下建立Menus.js，编写如下代码： Ext.define(SMS.store.Menus,{ extend: Ext.data.TreeStore, root: {  expanded: true  },  proxy: {  type: ajax,  url: /server/MenuLoader.asp  } })Ext.define(SMS.store.Menus,{ extend: Ext.data.TreeStore, root: { expanded: true }, proxy: { type: ajax, url: /server/MenuLoader.asp } })然后修改view文件夹下的Menu.js文件： Ext.define(SMS.view.Menu,{ extend: Ext.tree.Panel, alias: widget.smsmenu, requires:[SMS.store.Menus], initComponent : function(){ Ext.apply(this,{ id: menu-panel, title: 系统菜单, iconCls:icon-menu, margins : 0 0 -1 1, region:west, border : false, enableDD : false, split: true, width : 212, minSize : 130, maxSize : 300, rootVisible: false, containerScroll : true, collapsible : true, autoScroll: false, store:Ext.create(SMS.store.Menus), }); this.callParent(arguments); }})Ext.define(SMS.view.Menu,{ extend: Ext.tree.Panel, alias: widget.smsmenu, requires:[SMS.store.Menus], initComp