extjs desktop相关 动态生成开始菜单 多级菜单的快捷方式
程序员文章站
2024-01-17 14:55:34
...
最近用项目中用ext的一些东西，其中desktop这个是第一次用做个记录。其中开始菜单动态生成花了一天的时间，现在想想一开始把问题复杂化了，把自己做的东西拿出来，希望能给以后的同学一点建议。代码是在ext2的例子sample.js上改的
//测试数据
var data =[
{text:'应用平台管理',url:'null',filterUrl:'',appId:'0',menuId:'100489',leaf:false,
children:[
{text:'程序组定义',url:'/pub/ProgramGroup/PGManager.jsp',filterUrl:'null',appId:'0',menuId:'100531',leaf:true},
{text:'基础权限',url:'null',filterUrl:'',appId:'0',menuId:'100481',leaf:false,
children:[
{text:'功能注册',url:'/pub/FuncManager/funcManager.jsp',filterUrl:'null',appId:'0',menuId:'100574',leaf:true},
{text:'菜单注册',url:'/pub/MenuManager/menuManager.jsp',filterUrl:'null',appId:'0',menuId:'100554',leaf:true},
{text:'菜单链接',url:'/pub/frame/maintainMenuLink.jsp?tableName=XSR_PUB_MNUREG_V&optype=platformManage',filterUrl:'null',appId:'0',menuId:'100549',leaf:true},
{text:'职责维护',url:'/pub/DutyManager/dutyManager.jsp',filterUrl:'null',appId:'0',menuId:'100548',leaf:true},
{text:'用户定义',url:'/pub/frame/userMgrList.jsp',filterUrl:'null',appId:'0',menuId:'100547',leaf:true},
{text:'用户职责链接',url:'/pub/frame/userDutyLink.jsp?tableName=XSR_PUB_USERS_V&hideAddButton=true&hideDeleteButton=true',filterUrl:'null',appId:'0',menuId:'100546',leaf:true},
{text:'脚本导出导入',url:'/pub/frame/scriptExpAndImp.jsp',filterUrl:'null',appId:'0',menuId:'100589',leaf:true},
{text:'编辑配置文件',url:'/pub/frame/EditProfile.jsp',filterUrl:'null',appId:'0',menuId:'100871',leaf:true}
]
},
{text:'配置文件',url:'null',filterUrl:'',appId:'0',menuId:'100496',leaf:false,
children:[
{text:'配置文件定义',url:'/pub/ProfileDefinition/profile.jsp',filterUrl:'null',appId:'0',menuId:'100560',leaf:true},
{text:'配置文件关联',url:'/pub/ProfileLink/profileLink.jsp',filterUrl:'null',appId:'0',menuId:'100559',leaf:true}
]
},
{text:'并发程序',url:'null',filterUrl:'',appId:'0',menuId:'100477',leaf:false,
children:[
{text:'定时服务注册',url:'/pub/timer/program/ProgramManager.jsp',filterUrl:'null',appId:'0',menuId:'100500',leaf:true},
{text:'定时运行管理',url:'/pub/timer/run/RunManager.jsp',filterUrl:'null',appId:'0',menuId:'100609',leaf:true}
]
},
{text:'数据对象接口',url:'null',filterUrl:'',appId:'0',menuId:'100482',leaf:false,
children:[
{text:'上传下载数据对象',url:'/pub/objects/upanddownload/UpAndDownLoad.jsp',filterUrl:'null',appId:'0',menuId:'100502',leaf:true}
]
},
{text:'自定义表单',url:'null',filterUrl:'',appId:'0',menuId:'100909',leaf:false,
children:[
{text:'数据层',url:'null',filterUrl:'',appId:'0',menuId:'100910',leaf:false,
children:[
{text:'模板参数管理',url:'/pub/frm/templateParameters/tempManage.jsp',filterUrl:'null',appId:'0',menuId:'101113',leaf:true},
{text:'值集管理',url:'/pub/frm/valueSet/valueSet.jsp',filterUrl:'null',appId:'0',menuId:'100991',leaf:true},
{text:'应用模块管理',url:'/pub/frm/modelManage/appModel.jsp',filterUrl:'null',appId:'0',menuId:'100916',leaf:true},
{text:'数据对象注册',url:'/pub/frm/registerTable/dataRegist.jsp',filterUrl:'null',appId:'0',menuId:'100942',leaf:true}
]
},
{text:'设计层管理',url:'null',filterUrl:'',appId:'0',menuId:'100927',leaf:false,
children:[
{text:'表单设计器',url:'/pub/frm/stencilDesignMain.jsp',filterUrl:'null',appId:'0',menuId:'100932',leaf:true},
{text:'模板授权',url:'/pub/frm/templateAuthorization/templateAuthorization.jsp',filterUrl:'null',appId:'0',menuId:'100944',leaf:true},
{text:'模板管理',url:'/pub/frm/templateManager/templateManager.jsp',filterUrl:'null',appId:'0',menuId:'101123',leaf:true}
]
}
]
},
{text:'平台字典维护',url:'/pub/lookup/lookup.jsp',filterUrl:'null',appId:'0',menuId:'101186',leaf:true},
{text:'工作流管理',url:'null',filterUrl:'',appId:'0',menuId:'101081',leaf:false,
children:[
{text:'业务类型管理',url:'/workflow/businessTypeManager/businessTypeManager.jsp',filterUrl:'null',appId:'0',menuId:'101074',leaf:true},
{text:'假期规则管理',url:'/workflow/vacationRule/vacationRule.jsp',filterUrl:'null',appId:'0',menuId:'101077',leaf:true},
{text:'绘制流程图',url:'/workflow/flowChart/drawIndex/drawIndex.html',filterUrl:'null',appId:'0',menuId:'101079',leaf:true},
{text:'流程测试',url:'/workflow/definitionManager/definitionManager.jsp',filterUrl:'null',appId:'0',menuId:'101080',leaf:true},
{text:'流程监控',url:'/workflow/flowMonitoring/flowMonitoring.jsp',filterUrl:'null',appId:'0',menuId:'101288',leaf:true}
]
}
]
},
{text:'个人工作流管理',url:'null',filterUrl:'',appId:'0',menuId:'101088',leaf:false,
children:[
{text:'任务列表',url:'/workflow/agencyTask/agencyTaskList.jsp',filterUrl:'null',appId:'0',menuId:'101078',leaf:true},
{text:'假期规则定制',url:'/workflow/vacationRule/vacationRule.jsp?isNotAll=Y',filterUrl:'null',appId:'0',menuId:'101075',leaf:true}
]
},
{text:'Root测试',url:'/workflow/agencyTask/agencyTaskList.jsp',filterUrl:'',appId:'0',menuId:'1010889',leaf:true}
];
var menuData = Ext.data.Record.create([
{name: 'text'},
{name: 'url'} ,
{name: 'filterUrl'},
{name: 'leaf'},
{name: 'menuId'},
{name: 'children'}
]);
var myReader = new Ext.data.JsonReader({}, menuData);
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: myReader
});
var menuId = '';
var title = '';
var subItems = '';
var url='';
/**
*带有子节点开始菜单Module
*menuId:菜单ID，默认为空
*subItems：子菜单字符串
*title：菜单标题，默认为空
*windowId：窗体ID，默认为空
**/
var BogusModule = Ext.extend(Ext.app.Module, {
id:menuId,
init : function(){
var temp="this.launcher = { "+
"text: '"+title+"', "+
"iconCls:'settings', "+
"handler: function() { "+
" return false;"+
"},"+
"scope: this, "+
"menu: {items:["+subItems+"]},"+
"windowId:"+menuId+"}"
eval(temp);
},
createWindow:function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow(src.windowId);
if(!win){
win = desktop.createWindow(
{ id: src.windowId,
title:src.text,
width:740,
height:480,
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,
items: new Ext.Panel({
title: src.text,
header:false,
html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src='+src.url+'></iframe>',
border:false
})
})
}
win.show();
}
});
/**
*没有子节点开始菜单Module
*menuId:菜单ID，默认为空
*url：对应功能url，默认为空
*title：菜单标题，默认为空
*windowId：窗体ID，默认为空
**/
//子菜单构建函数，递归生成一个嵌套menu的字符串
function addMenu(dataArr){
var tmp = dataArr;
while( dataArr.children!=undefined){
var item ="{id:'"+tmp.menuId+"',text: '"+tmp.text+"', iconCls:'bogus', handler : function(){ return false; },scope: this, menu:{ items:[";
for(var k=0;k<dataArr.children.length;k++){
item = item+addMenu(dataArr.children[k])+",";
}
item =item.substring(0,item.length-1);
return item+"]}}";
}
return "{id:'"+tmp.menuId+"', text:'"+tmp.text+"',iconCls:'bogus',scope: this, windowId: '"+tmp.menuId+"', handler : this.createWindow, url:'"+tmp.url+"'}"
};
MyDesktop = new Ext.app.App({
init :function(){
Ext.QuickTips.init();
},
getModules : function(){
store.load();
var items = new Array();
for(var i=0;i<store.getCount();i++){
var t = store.getAt(i);
if( t.get('children')!=undefined){
if(t.get('children')!="") {
for(var j=0;j<t.get('children').length;j++){
subItems = subItems+addMenu(t.get('children')[j])+",";
}
subItems = subItems.substring(0,subItems.length-1);
menuId = t.get('menuId');
title = t.get('text');
var em = Ext.extend(Ext.app.Module, {
id:menuId,
init : function(){
var temp="this.launcher = { "+
"text: '"+title+"', "+
"iconCls:'settings', "+
"handler: function() { "+
" return false;"+
"},"+
"scope: this, "+
"menu: {items:["+subItems+"]},"+
"windowId:"+menuId+"}"
eval(temp);
},
createWindow:function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow(src.id+'a');
if(!win){
win = desktop.createWindow(
{ id: src.windowId+'a',//这里定义id，要和menu的id区别开，不然会有问题
title:src.text,
width:740,
height:480,
shim:false,
// closeAction:'hide',
animCollapse:false,
border:false,
constrainHeader:true,
items: new Ext.Panel({
title: src.text,
header:false,
html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src='+src.url+'></iframe>',
border:false
})
})
}
win.show();
}
});
items.push(new em());
subItems ='';
}else{
menuId = t.get('menuId');
title = t.get('text');
url= t.get('url');
var RootModule = Ext.extend(Ext.app.Module, {
id:menuId,
init : function(){
this.launcher = {
text: title,
iconCls:'settings',
handler: this.createWindow,
scope: this,
url:url,
windowId:menuId
}
},
createWindow:function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow(menuId);
if(!win){
win = desktop.createWindow(
{ id: menuId,
title:title,
width:740,
height:480,
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,
items: new Ext.Panel({
title: title,
header:false,
html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src='+URL+'></iframe>',
border:false
})
})
}
win.show();
}
});
items.push(new RootModule());
}
}
}
return items;
},
// config for the start menu
getStartConfig : function(){
return {
title: '当前用户',
iconCls: 'user',
toolItems: [{
text:'快捷通道',
iconCls:'settings',
scope:this,
handler: function() {
alert('快捷通道');
}
},'-',{
text:'登陆设置',
iconCls:'logout',
scope:this,
handler: function() {
alert('登陆设置');
}
},'-',{
text:'职责切换',
iconCls:'logout',
scope:this,
handler: function() {
alert('职责切换');
}
}]
};
}
});
下面说一下多级菜单的快捷方式的做法，
<dt id="tab-win-shortcut">
<a href="#"><img src="images/im48x48.png" />
<div>Accordion Window</div></a>
</dt>
这个是例子中定义快捷方式的代码，这个只能支持一级的菜单，现在在这个上面修改<dt id="multi-menu-shortcut" rmid="rootMenu">
<a href="#"><img src="images/im48x48.png" />
<div>multi-menu Window</div></a>
</dt>
多了一个rmid，这个是多级菜单的根菜单的id。这里就要在Desktop.js做一些修改，shortcuts.on('click', function(e, t){
if(t = e.getTarget('dt', shortcuts)){
e.stopEvent();
var module = app.getModule(t.id.replace('-shortcut', ''));
if(module){
module.createWindow();
}
//---多级菜单快捷方式--
else
{
var rm = e.getTarget('dt', shortcuts).attributes.rmid.value;//对应的rmid 根菜单module id
var rmmodule = app.getModule(rm);
var str = t.id.replace('-shortcut', '');
var temp=Ext.getCmp(str);//获取本菜单对象
rmmodule.createWindow(temp);
}
//---多级菜单快捷方式--
}
});
附件是全部的代码，需要的可以看一下，放到要自己添加ext支持。
效果如图
- desktop.rar (499.2 KB)
- 下载次数: 348
