Ext.tree.TreePanel,accordion布局基于SSH+JSON的系统级应用之菜单设计

ExtJS作为前端JS框架，在企业级系统建设方面占有相当大的地位。无论是在界面设计、页面缓存处理、跨浏览器、面向对象方面都非常优秀。而且还有一个非常优秀的文档。相信大部分人都是被其界面吸引，但是我们在透过界面看Ext的实现方式和思想真的是让人受益匪浅。也不废话了，Ext对于大家来说应该有所了解。

有很多人说：Ext难学、难用，找不到切入点。我个人感觉做Ext的东西，就是做数据。你要做什么东西首先得想明白的就是需要什么样的数据。当你明白了需要什么样的数据时，其他的配置性的东西只要去查查文档就可以了。实际引用中我们并不需要做很炫的效果，拘泥于细节，好多东西换个方式也能实现。抓住重点，有的放矢!

当我们对Ext的一个开发原则有了了解之后，我们就可以开始动手设计异步加载菜单了：

[ { "text":"通用<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>","iconCls":"","leaf":true,"id":"CommonCodePanel" },{ "text":"系统资源","id":"ResourceListPanel" },{ "text":"系统角色","id":"RolePanel" } ]

这是一个Ext.tree.TreePanel需要的数据，数据是通过Ext.tree.TreeLoader对象加载的，具体怎么加载的我们不深究，我们只是准备好它需要的数据就可以了，

首先在Action里面从Service层获取定制的数据@SuppressWarnings("unchecked") public String execute() { //树状<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a> if (user.getLayout().equals(CommonConstants.LAYOUT_EAST) | user.getLayout().equals(CommonConstants.LAYOUT_WEST)) { JSONArray array = this.sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>Service .getResourceTree("root",(List<Resource>) this.request.getSession().getAttribute (FrameworkConstants.SESSION_KEY_CURRENT_USER_COMPONENT));//系统缓存的角色和<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>对应关系 request.setAttribute("menuList",array); } else { //下拉按钮式<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>(稍候会讲) JSONArray array = this.sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>Service .getResourceMenu(null,(List<Resource>) this.request.getSession() .getAttribute(FrameworkConstants.SESSION_KEY_CURRENT_USER_COMPONENT)); request.setAttribute("menuList",array); } return <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>patcher("/jsp/index.jsp"); }

在Service层中从数据库中获取数据，并组织成Ext.tree.TreePanel需要的数据：

public JSONArray getResourceTree(String id,List<Resource> all) { //id<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>是方便异步加载，根据<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>的ID，<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>某个<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>的子<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a> JSONArray array = new JSONArray(); if (id == null || id.equals("root")) { //root为根节点的标志，这个可以任意取，约定好就行，在<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>上要进行控制 for (Resource r : all) { if (r.getParent() == null) { JSONObject json = new JSONObject(); json.element("id",r.getId()); json.element("iconCls",r.getIcon()); json.element("text",r.getName()); array.add(json); } } } else { for (Resource r : all) { if (r.getParent() != null) { if (r.getParent().getId().toString().equals(id)) { JSONObject json = new JSONObject(); json.element("text",r.getName()); json.element("iconCls",r.getIcon()); if (r.getChildren() != null && r.getChildren().size() > 0) { json.element("leaf",false); json.element("id",r.getId()); } else { json.element("leaf",true); if (r.getComponent() != null) { json.element("id",r.getComponent()); } } array.add(json); } } } } return array; }

数据准备好了，剩下的就是在页面进行展示：

//层叠样式的<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>，当然后面就有树状样式的<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>了 var accor<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>nPanel = new Ext.Panel({ title : '层叠<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>',iconCls : 'icon-accor<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>n',autoScroll : false,layout : 'accor<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>n',defaultType :'treepanel',activeItem : 0,layoutCon<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a> : {animate : true} }); //导航面板 var navigationTab = new Ext.TabPanel({ activeTab : 0,enableTabScroll : true,an<a href="https://www.jb51.cc/tag/ims/" target="_blank" class="keywords">ims</a>croll : true,autoScroll : true,border : false,region : 'center',tabPosition: 'b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om',items : [accor<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>nPanel] }); //将组织好的数据解析成JSON数据格式 var data = support.decodeJSON('${menuList}'); /***********************实现层叠样式<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>*************************/ //循环往层叠样式面板中插入面板 for ( var i = 0; i < data.length; i++) { accor<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>nPanel.add({ title : data[i].text,iconCls : data[i].iconCls,rootVisible : false,//定义异步记载的根节点 root : new Ext.tree.AsyncTreeNode({id : data[i].id}),loader : new Ext.tree.TreeLoader({ dataUrl : ctx+'/sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>/index!get.do',requestMethod : 'post',clearOnLoad : true }),tools : [{ id : 'refresh',qtip : '刷新<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>',handler : function(a,b,panel){ panel.root.reload(); } }],listeners : {'click' : function(node){ support.addtab(node);//<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>到主面板中 },'load' : function(node){ this.getLoader().baseP<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>ms = null;//加载完成后清除loader对象中的参数 },'beforeload' : function(node){ //这一步很关键，<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>要节点的ID，取出子节点 this.getLoader().baseP<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>ms = {id : node.id}; } } }); } /************************实现树状样式<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>**************************/ var menuTree = new Ext.tree.TreePanel({ title : '树状<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>',iconCls : 'icon-tree',animCollapse : true,root : new Ext.tree.AsyncTreeNode({id : 'root'}),requestMethod : 'post' }),tbar : [{ xtype : 'textfield',emptyText : '查找<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>....',width : 90,enableKeyEvents : true,listeners : { 'keyup' : function(){ filterTreeNode(this.getValue(),menuTree.root); } } },'->',{ iconCls : 'icon-collapse-all',//收缩按钮 tooltip:{text : '收缩全部'},handler : function(){ menuTree.collapseAll() } },'-',{ iconCls : 'icon-expand-all',//展开按钮 tooltip:{text : '展开全部'},handler : function(){ menuTree.expandAll(); } },{ iconCls : 'icon-refresh',tooltip:{text : '刷新<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>'},handler : function(){ menuTree.root.reload(); } }],listeners : {'click' : function(node){ support.addtab(node); },'load' : function(node){ this.getLoader().baseP<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>ms = null; },'beforeload' : function(node){ this.getLoader().baseP<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>ms = {id : node.id}; } } }); navigationTab.add(menuTree);

这个异步加载菜单就完成了，效果图：

层叠样式菜单：

树状样式菜单：

我的另外一篇文章，介绍的是几点的实例，有源码：http://www.jb51.cc/article/p-gumtmycg-bca.html ，QQ群：197331959