extjs desktop相关 动态生成开始菜单 多级菜单的快捷方式

最近用项目中用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支持。
效果如图


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值