Extjs4快速上手四——实现菜单-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Extjs4快速上手四——实现菜单

简介: 原文 http://www.cnblogs.com/good-temper/archive/2013/04/16/3023263.html 这几天状态不佳,杂事太多有些烦心,这一次就少讲点吧。   本次将主要讲Extjs树形菜单的实现。

原文 http://www.cnblogs.com/good-temper/archive/2013/04/16/3023263.html

这几天状态不佳,杂事太多有些烦心,这一次就少讲点吧。

  本次将主要讲Extjs树形菜单的实现。在很多系统里边,树形菜单被广泛应用,主要因为其有清晰的层次结构。记得最早见到的树形菜单是通 过<ul><li>实现的,非常简单。之后用C#的现成控件拖拽了一个,当时还沾沾自喜。再后来在学习师兄的一个通用后台代码 时,看到了梅花雪,当时感觉太强大了,每个节点都可以存在数据库,并且能够进行自定义。之后接触到一些UI库之后,更是见到了更强大的树形菜单。

  或许实现一个简单的树形菜单对于不少人并非难事,但是想要实现一个功能比较完善的确要花不少功夫。好在目前有很多现成的供我们使用,而Extjs也提供了功能丰富的树形菜单。本次我们就来讲最简单的一种:Ext.tree.Panel。

  正如之前讲到的,我们在实现一个Extjs组件时,应该按照如下的步骤:

  以下就是各部分的代码实现:

复制代码
//model
Ext.define('et.model.Menu', { extend: 'Ext.data.Model', fields: ['mid', 'text','cls','columns','url','expanded','optype'] });
//或许你看到这些字段和下边json数据并不对应,这个并不重要,这里边有几个是我自己拓展的,只是没用到,只要几个关键的字段设置即可,下边会有介绍。
复制代码
复制代码
//store
Ext.define('et.store.Menus',{ extend: 'Ext.data.TreeStore', requires: 'et.model.Menu', model: 'et.model.Menu', autoLoad: true,            //设置自动加载,在打开页面的时候数据就自动加载 proxy: { type: 'ajax', url: 'data/manager.json', reader: { type: 'json', successProperty: 'success' } } });
复制代码
复制代码
//view
Ext.define('et.view.Menu',{ extend: 'Ext.tree.Panel', alias: 'widget.sxptmenu', requires:['et.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('et.store.Menus') }); this.callParent(arguments); } });
复制代码
复制代码
//controller
Ext.define('et.controller.Menu',{ extend: 'Ext.app.Controller', stores: ['Menus'], models: ['Menu'], views: ['Menu'], init: function () { //初始化部分,下面是部分是给菜单绑定单击事件,接下来会用,这里先注释 this.control({ 'sxptmenu': { itemmousedown: this.loadMenu } }); }, loadMenu:function(selModel, record){     //加载菜单项对应panel,首先判断是不是叶子结点,是的话判断当前该panel是否已经创建,已创建的话直接激活,未创建的话创建并加入content-panel if (record.get('leaf')) { if(record.get('optype')=='window'){ var win= Ext.getCmp(record.get('url')); if(!win){ win=Ext.widget(record.get('url')) } win.show(); } else{ var panel = Ext.getCmp(record.get('id')); if(!panel){ panel ={ id:record.get('url'), title: record.get('text'), xtype:record.get('url'), closable: true }; this.openTab(panel,record.get('url')); }else{ var main = Ext.getCmp("content-panel"); main.setActiveTab(panel); } } } }, openTab : function (panel,id){ var o = (typeof panel == "string" ? panel : id || panel.id); var main = Ext.getCmp("content-panel"); var tab = main.getComponent(o); if (tab) { main.setActiveTab(tab); } else if(typeof panel!="string"){ panel.id = o; var p = main.add(panel); main.setActiveTab(p); } } });
复制代码
复制代码
//app.js
Ext.Loader.setConfig({enabled: true}); Ext.application({ name:'et', autoCreateViewport: true, appFolder:'app', 'Menu'        //加入菜单的controller ] });
复制代码

  我们只要在后台将菜单按照固定格式的json将数据传过来即可,下面我们看一下一个简单菜单的json数据:

复制代码
[{"text":"题目管理",
  "mid":"1",
  "cls":"folder",
  "leaf":false,
  "expanded": true,
  "children":[{"text":"题目列表",
                 "mid":"2",
                 "cls":"file",
                 "url":"subjectlist",
                 "leaf":true,
                 "children":[]}
               ]
 },{"text":"分组管理",
  "mid":"3",
  "cls":"folder",
  "leaf":false,
  "expanded": true,
  "children":[{"text":"选题分组确认",
                 "mid":"4",
                 "cls":"file",
                 "url":"mstudentlist",
                 "leaf":true,
                 "children":[]},
                 {"text":"分组列表",
                 "mid":"5",
                 "cls":"file",
                 "url":"mstudentlist",
                 "leaf":true,
                 "children":[]},
                 {"text":"报告审阅",
                 "mid":"6",
                 "cls":"file",
                 "url":"mstudentlist",
                 "leaf":true,
                 "children":[]}
               ]
 }]
复制代码

  其中我们可以看到,text指定了结点名,cls指定了图标样式(如folder为文件夹图标,file为文件图标),leaf指定是否为叶子结点,children内嵌套子结点。其他几个均为自定义,如这里url来指定打开panel的别名。

  基本的menu的用法就是这么简单,如果有更高的需求,如添加复选按钮、可拖动、动态编辑等,可参考extjs自带的实例代码。

  最后讨论一下json的生成,对于灵活性比较高的系统(如权限管理),一般把每个菜单项存在数据库比较方便,可根据情况组合后拼接json返回 前台。但是很多时候我们或许并不需要这么高的灵活度,例如每个角色菜单固定,那么这是我们可以考虑按照如上json格式将每个菜单写进一个json文件, 在用户登陆时判断角色加载对应文件即可。这样做能够省不少事(但要注意防止用户直接打开json文件路径,来越权操作功能,所以后台最好在拦截器里再进行 下判断)。

   代码在见上一遍最后。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章