现在从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>
