现在从menu.json文件中读取菜单,点击左侧的树形菜单,右侧该如何动态加载相关模块的信息? 请各位指教 谢谢~
menu.json:
{ "code":"11", "name":"信息维护", "href":"", "iconCls":"information", "parentcode":"" },{ "code":"1101", "name":"机构维护", "href":"agency", "iconCls":"building", "parentcode":"11" },{ "code":"110101", "name":"三级菜单", "parentcode":"1101" }
AccordinTreePanel.js代码
Ext.ns("QM.ui"); QM.ui.MenuPanel = Ext.extend(Ext.Panel, { /** * @cfg(url) 发送请求的地址 */ /** * @cfg(root) json数组的根字符串 */ constructor: function(config){ QM.ui.MenuPanel.superclass.constructor.call(this, Ext.apply({ maxSize: 240, minSize: 210, // collapseMode: 'mini', collapsible : true, // animCollapse: false, id: 'menuPanel', width: 210, header: true, split: true, layout: 'accordion', layoutConfig : { // 展开折叠是否有动画效果 animate : true }, region: 'west', autoScroll: true, margins:'0 0 0 5', cmargins: '0 0 0 0', ref: 'menuPanel' }, config || {})); }, initComponent: function(){ QM.ui.MenuPanel.superclass.initComponent.call(this); this.addEvents( /** * @event itemclick 树结点被点击时触发 参数:node 当前结点对象,record 当前结点对应record对象 */ 'click', /** * @event afterload 菜单项加载完毕后触发 */ 'afterload'); if (!this.store) { this.store = new Ext.data.JsonStore({ url: this.url, root: this.root, fields: ['code', 'name', 'parentcode', 'iconCls', 'href'] }); } this.store.load({ callback: this.loadTrees, scope: this }); }, loadTrees: function(records, o, s){ var pnodes, trees = [], tree; this.store.sort('code'); for (var i = 0; i < records.length; i++) { var record = records[i]; if (!record.get('parentcode')) { tree = this.creatTreeConfig(record); trees.push(tree); pnodes = []; pnodes.push(tree.root); } else { var next_record = records[i + 1]; var isLeaf = !next_record || next_record.get('parentcode') != record.get('code'); this.addTreeNode(pnodes, record, isLeaf); } } Ext.each(trees, function(tree){ this.add(tree); }, this); this.mon(this.el, 'click', this.onClick, this); this.doLayout(); this.store.destroy(); this.fireEvent('afterload', this); }, //@public 根据结点id找到结点对象 getNodeById: function(id){ var node, trees = this.findByType('treepanel', true); Ext.each(trees, function(tree){ node = tree.getNodeById(id); return !node;//找到的话返回false }); return node; }, onClick: function(e, t, o){ if (Ext.fly(t).hasClass('x-tree-ec-icon')) {//点击伸展按钮时无视 return; } var el, id, node; if (el = e.getTarget('.x-tree-node-el', 3, true)) { e.stopEvent(); id = el.getAttributeNS('ext', 'tree-node-id'); node = this.getNodeById(id); var workPanel = this.ownerCt.workPanel; workPanel.showTab(node); this.fireEvent('click', this, node); } }, creatTreeConfig: function(record){ var config = { xtype: 'treepanel', autoScroll: true, rootVisible: false, // useArrows:true, Vista-style的箭头 lines: true, title: record.get('name'), iconCls: record.get('iconCls'), border:false, root: { nodeType: 'async', expanded: true, id: record.get('code'), children: [] }, listeners: { 'deactivate': function(tree){ tree.getSelectionModel().clearSelections(true); } } }; return config; }, addTreeNode: function(pnodes, record, isLeaf){ var len = pnodes.length; for (var i = len - 1; i >= 0; i--) { if (pnodes[i].id != record.get('parentcode')) { pnodes.pop(); } else { var parent = pnodes[i].children; var node = { text: record.get('name'), id: record.get('code'), iconCls: record.get('iconCls'), href: record.get('href'), leaf: isLeaf }; if (!isLeaf) { node.children = []; pnodes.push(node); } parent.push(node); return; } } }, //@public根据node对象/id显示结点所在tree并选中 selectNode: function(node){ var tree; if (Ext.isString(node)) { node = this.getNodeById(node); } tree = node.getOwnerTree(); this.getLayout().setActiveItem(tree.getId()); tree.expandPath(node.getPath()); tree.getSelectionModel().select(node); } }); //showTab用于显示子组件,loadChild用于子组件的加载 QM.ui.WorkPanel = Ext.extend(Ext.TabPanel, { ref: 'workPanel', region: 'center', resizeTabs: true, minTabWidth: 135, tabWidth: 135, plugins: new Ext.ux.TabCloseMenu(), enableTabScroll: true, activeTab: 0, beforeInit: Ext.emptyFn, loadChild: Ext.emptyFn, initComponent: function(){ QM.ui.WorkPanel.superclass.initComponent.call(this); this.on('tabchange', this.onChange); }, onChange: function(tp, tab){ var menuPanel = this.ownerCt.menuPanel; var tree; if (tab.itemId) { menuPanel.selectNode(tab.itemId); } else //选择主页时清空当前树的选择项 if (tree = menuPanel.getLayout().activeItem) { tree.getSelectionModel().clearSelections(true); } }, //@public根据node或id显示对象panel没有的话创建 showTab: function(node){ var menuPanel = this.ownerCt.menuPanel;//找到菜单面板 if (Ext.isString(node)) { node = menuPanel.getNodeById(node); if (!node) { return; } } var tab, attrs = node.attributes; //只有没有下级的才能显示在右侧 if(attrs.leaf){ if (!this.getItem(attrs.id)) { tab = this.add({ itemId: attrs.id, title: attrs.text, iconCls: attrs.iconCls, closable: true, layout: 'fit' }) var child = this.loadChild(tab, node); tab.add(child || {}); this.doLayout(); } this.setActiveTab(attrs.id); } } })
login.jsp 页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>web管理登录</title> <!-- 自定义Css样式 --> <link href="<%=request.getContextPath() %>/mycss/houfei-loading.css" rel="stylesheet" type="text/css" /> <link href="<%=request.getContextPath() %>/mycss/houfei-icon.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/CssStyle.css"/> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/themes.css"/> <!-- Ext 所需的Js和 Css 文件 --> <link href="<%=request.getContextPath() %>/ext-3.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.1/ext-base.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.1/ext-all.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.1/ext-lang-zh_CN.js" charset="utf-8"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/TabCloseMenu.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/FileUploadField.js"></script> <!-- 自定义工具类 --> <script type="text/javascript" src="<%=request.getContextPath() %>/js/GridPanelUtils.js"></script> <!-- 主页 --> <script type="text/javascript" src="<%=request.getContextPath() %>/myjs/AccordinTreePanel.js" charset="utf-8"></script> <!-- 各分模块 --> <!-- 用户角色 --> <script type="text/javascript" src="<%=request.getContextPath() %>/myjs/userrole/AddUserRoleWindow.js" charset="utf-8"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/myjs/userrole/EditUserRoleWindow.js" charset="utf-8"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/myjs/userrole/UserRoleForm.js.js" charset="utf-8"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/myjs/userrole/UserRoleGridPanel.js" charset="utf-8"></script> <!-- 主程序 --> <script type="text/javascript"> Ext.ns('App'); //菜单面板 App.MenuPanel = QM.ui.MenuPanel.extend({ root: 'menus', ref: 'menuPanel', url: '/sdcdmp_czfs/myjs/menu.json', title:'导航菜单', iconCls:'houfei-icon-plugin', // tbar:[{}], listeners: { 'click': Ext.emptyFn } }); //工作区面板 App.WorkPanel = QM.ui.WorkPanel.extend({ constructor: function(config){ config = config || {}; Ext.applyIf(config, { items: [{ title: '首页', iconCls:'houfei-homeTabIcon', html: '工作平台' }] }) App.WorkPanel.superclass.constructor.call(this, config); }, //tab:子组件 node:树节点 返回待添加组件 loadChild: function(tab, node){ var attrs=node.attributes; // alert("加载子组件:"+tab.itemId+"==="+attrs.id+"href:"+attrs.href); } }); //负责直连工作区 App.afterLoad = function(viewport){ var qstr = window.location.href.split('?')[1]; if (qstr) { var ps = Ext.urlDecode(qstr); var code = ps['code']; viewport.menuPanel.on('afterload', function(){ viewport.workPanel.showTab(code); viewport.doLayout(); }, null, { single: true }); } } Ext.onReady(function(){ Ext.QuickTips.init(); Ext.BLANK_IMAGE_URL = '/sdcdmp_czfs/ext-3.2.1/resources/images/default/tree/s.gif'; // ThemeManager.init('header'); var menupanel = new App.MenuPanel(); var workpanel = new App.WorkPanel(); var view = new Ext.Viewport({ layout: 'border', items: [{ cls: 'docs-header', height: 30, region: 'north', xtype: 'box', el: 'header', border: false }, { region: 'south', xtype: 'box', el: 'bottom' }, menupanel, workpanel] }); App.afterLoad(view); }); </script> </head> <body> <div id="header"> <div class="api-title"> web管理 </div> </div> <div id="bottom"> </div> </body> </html>