Ext.tree.TreePanel,accordion佈局基於SSH+JSON的系統級應用之菜單設計

ExtJS作爲前端JS框架，在企業級系統建設方面佔有相當大的地位。無論是在界面設計、頁面緩存處理、跨瀏覽器、面向對象方面都非常優秀。而且還有一個非常優秀的文檔。相信大部分人都是被其界面吸引，但是我們在透過界面看Ext的實現方式和思想真的是讓人受益匪淺。也不廢話了，Ext對於大家來說應該有所瞭解。

有很多人說：Ext難學、難用，找不到切入點。我個人感覺做Ext的東西，就是做數據。你要做什麼東西首先得想明白的就是需要什麼樣的數據。當你明白了需要什麼樣的數據時，其他的配置性的東西只要去查查文檔就可以了。實際引用中我們並不需要做很炫的效果，拘泥於細節，好多東西換個方式也能實現。抓住重點，有的放矢!

當我們對Ext的一個開發原則有了瞭解之後，我們就可以開始動手設計異步加載菜單了：

[ { "text":"通用代碼", "iconCls":"", "leaf":true, "id":"CommonCodePanel" }, { "text":"系統資源", "iconCls":"", "leaf":true, "id":"ResourceListPanel" }, { "text":"系統角色", "iconCls":"", "leaf":true, "id":"RolePanel" } ]

這是一個Ext.tree.TreePanel需要的數據，數據是通過Ext.tree.TreeLoader對象加載的，具體怎麼加載的我們不深究，我們只是準備好它需要的數據就可以了，

首先在Action裏面從Service層獲取定製的數據 @SuppressWarnings("unchecked") public String execute() { //樹狀菜單 if (user.getLayout().equals(CommonConstants.LAYOUT_EAST) | user.getLayout().equals(CommonConstants.LAYOUT_WEST)) { JSONArray array = this.systemService .getResourceTree("root",(List<Resource>) this.request.getSession().getAttribute (FrameworkConstants.SESSION_KEY_CURRENT_USER_COMPONENT));//系統緩存的角色和菜單對應關係 request.setAttribute("menuList", array); } else { //下拉按鈕式菜單(稍候會講) JSONArray array = this.systemService .getResourceMenu(null,(List<Resource>) this.request.getSession() .getAttribute(FrameworkConstants.SESSION_KEY_CURRENT_USER_COMPONENT)); request.setAttribute("menuList", array); } return dispatcher("/jsp/index.jsp"); }

在Service層中從數據庫中獲取數據，並組織成Ext.tree.TreePanel需要的數據：

public JSONArray getResourceTree(String id, List<Resource> all) { //id屬性是方便異步加載，根據獲取的ID，獲取某個菜單的子菜單 JSONArray array = new JSONArray(); if (id == null || id.equals("root")) { //root爲根節點的標誌，這個可以任意取，約定好就行，在頁面上要進行控制 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; }

數據準備好了，剩下的就是在頁面進行展示：

//層疊樣式的菜單，當然後面就有樹狀樣式的菜單了 var accordionPanel = new Ext.Panel({ title : '層疊菜單', iconCls : 'icon-accordion', autoScroll : false, layout : 'accordion', defaultType :'treepanel', activeItem : 0, layoutConfig : {animate : true} }); //導航面板 var navigationTab = new Ext.TabPanel({ activeTab : 0, enableTabScroll : true, animScroll : true, autoScroll : true, border : false, region : 'center', tabPosition: 'bottom', items : [accordionPanel] }); //將組織好的數據解析成JSON數據格式 var data = support.decodeJSON('${menuList}'); /***********************實現層疊樣式菜單*************************/ //循環往層疊樣式面板中插入面板 for ( var i = 0; i < data.length; i++) { accordionPanel.add({ title : data[i].text, iconCls : data[i].iconCls, autoScroll : true, rootVisible : false, //定義異步記載的根節點 root : new Ext.tree.AsyncTreeNode({id : data[i].id}), loader : new Ext.tree.TreeLoader({ dataUrl : ctx+'/system/index!get.do', requestMethod : 'post', clearOnLoad : true }), tools : [{ id : 'refresh', qtip : '刷新菜單', handler : function(a,b,panel){ panel.root.reload(); } }], listeners : {'click' : function(node){ support.addtab(node);//添加到主面板中 }, 'load' : function(node){ this.getLoader().baseParams = null;//加載完成後清除loader對象中的參數 }, 'beforeload' : function(node){ //這一步很關鍵，獲取要節點的ID，取出子節點 this.getLoader().baseParams = {id : node.id}; } } }); } /************************實現樹狀樣式菜單**************************/ var menuTree = new Ext.tree.TreePanel({ title : '樹狀菜單', iconCls : 'icon-tree', autoScroll : true, rootVisible : false, animCollapse : true, root : new Ext.tree.AsyncTreeNode({id : 'root'}), loader : new Ext.tree.TreeLoader({ dataUrl : ctx+'/system/index!get.do', requestMethod : 'post' }), tbar : [{ xtype : 'textfield', emptyText : '查找菜單....', 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 : '刷新菜單'}, handler : function(){ menuTree.root.reload(); } }], listeners : {'click' : function(node){ support.addtab(node); }, 'load' : function(node){ this.getLoader().baseParams = null; }, 'beforeload' : function(node){ this.getLoader().baseParams = {id : node.id}; } } }); navigationTab.add(menuTree);

這個異步加載菜單就完成了，效果圖：

層疊樣式菜單：