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

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

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

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

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

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

//modelExt.define('et.model.Menu', { extend: 'Ext.data.Model', fields:  ['mid', 'text','cls','columns','url','expanded','optype']
});//或许你看到这些字段和下边json数据并不对应,这个并不重要,这里边有几个是我自己拓展的,只是没用到,只要几个关键的字段设置即可,下边会有介绍。

//storeExt.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'}}
});

//viewExt.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); }
}); 

//controllerExt.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-panelif (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.jsExt.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文件路径,来越权操作功能,所以后台最好在拦截器里再进行 下判断)。

  代码在见上一遍最后。

Extjs4快速上手四——实现菜单相关推荐

  1. 【Microsoft Azure 的1024种玩法】五十四. 十分钟快速上手创建部署Azure speech服务

    [简介] Azure语音服务是Microsoft提供稳定可靠的云通信服务,其在单个 Azure 订阅中统合了语音转文本.文本转语音以及语音翻译功能,我们可以通过各种方式(语音 CLI.语音 SDK.S ...

  2. 《Python游戏编程快速上手》第十四章----凯撒密码

    <Python游戏编程快速上手>的第十二章主要讲了笛卡尔坐标系的基本数学知识,我就不重现了:然后第十三章主要是一个笛卡尔坐标系的小应用,这个小应用也是非常简单的,所以我就不重现了. 今天主 ...

  3. 《Python游戏编程快速上手》第四章-讲笑话

    接着昨天的文章,今天实现<Python游戏编程快速上手>的第四章–讲笑话.这个小游戏的实现非常之简单.所以我就不说什么了,直接上代码 print("What do you get ...

  4. 快速上手任务栏与开始菜单的布局与美化

    平时使用电脑,如果没有全屏看视频.打游戏,任务栏一般都在十分显眼的位置,用以提示消息.处理后台程序:而轻轻点开其上的Windows徽标就能打开开始菜单,用以快速打开各种各样的程序.这些触手可及的地方如 ...

  5. 【前端工程化】四:打包工具Rollup快速上手和Parcel的使用

    Rollup 相比于webpack,rollup要小巧的多,它仅仅是一款ES Module打包器,并不支持例如HMR等特性,它的初衷是提供一个充分利用ESM各项特性的高效打包器: Rollup快速上手 ...

  6. ROS四旋翼无人机快速上手指南(1):无人机系统硬件概述与指南简介

    成就更好的自己 ROS无人机快速上手指南旨在于让使用此无人机开发平台的比赛参赛人员,算法设计人员,无人机爱好者更加快速的了解底层控制运作原理,从而缩短开发周期,减少掉坑次数,快速验证算法的速度,不用在 ...

  7. Netron开发快速上手(一):GraphControl,Shape,Connector和Connection

    版权所有,引用请注明出处:<<http://www.cnblogs.com/dragon/p/5203663.html >> 本文所用示例下载FlowChart.zip 一个用 ...

  8. 快速上手Ubuntu之安装常用软件篇——打造一个满足基本娱乐办公的Ubuntu

    该博客是紧接着上一篇的:快速上手Ubuntu之安装篇--安装win7,Ubuntu16.04双系统 在上一篇博客中,我们成功安装了Ubuntu,但只是个全新的系统,我们还需要安装一些常用软件来满足娱乐 ...

  9. 编程初学者快速上手实战套路

    很多初学者刚开始学编程时,上来就只想着编码!编码!!编码!!! 但你知道什么是编程吗? 要知道:编码≠编程 今天就为大家介绍一种快速上手的编程套路,在套路的基础上编码有如神助! 学过Java语法的童鞋 ...

最新文章

  1. android 代码设置居右_android如何让textview文字居右
  2. WinForm实现Rabbitmq官网6个案例-Topics
  3. Js的Url中传递中文参数乱码的解决
  4. Session or Cookie?是否有必要使用Tomcat等一下Web集装箱Session
  5. GL ERROR - after deleteUnusedTextures() glError (0x502)
  6. BZOJ3172 TJOI2013 单词
  7. 10.Partial Dependence Plots
  8. 漫步最优化二十——下降函数
  9. Xcode C++ and Objective-C refactoring
  10. Linux命令 - chmod命令
  11. Tomcat官网下载旧版本
  12. 深蓝学院-多传感器融合定位-第3章作业
  13. 为什么电脑安装qq后显示没网络连接服务器,能上QQ电脑却无法上网怎么解决
  14. QlikView介绍
  15. 焦作护理学校计算机应用专业,2019焦作中职学校名单大全
  16. web前端开发常用的10个高端CSS UI开源框架
  17. 【论文阅读】3D Topology-Preserving Segmentation with Compound Multi-Slice Representation
  18. 三菱或尝试抛弃后视镜,使用摄像头和AI技术来导航
  19. 用Java写一款小游戏
  20. nfc卡模式与标准模式_NFC 的通信模式。什么是点对点模式,什么是模拟卡和读卡器模式...

热门文章

  1. 怎么解决tomcat端口占用问题?
  2. jenkins组权限_Jenkins 中基于角色的权限管理
  3. substr判断最后一个是不是逗号_考研最后一个月是不是很累?
  4. 计算机学院运动会开幕式稿,运动会开幕式新闻稿 运动会开幕式广播稿原创2019...
  5. python tkinter linux,用于Python和Tkinter的Linux上的字体管理
  6. ajax常见的status状态码
  7. Python中使用xpath获取select option的每一行的text和value
  8. matlab freqs函数用法,Matlab freqs 函数
  9. Oracle中varchar2(20)和varchar2(20 byte)区别
  10. php 数据 缓存,php终极数据缓存,比redis、GlobalData等快200倍以上,极致性能