最近用项目中用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支持。
效果如图
- 大小: 93.8 KB
分享到：
相关推荐
总结来说，ExtJS 4.2 Desktop 拓展是一个集成了多种桌面特性并优化了基础框架的解决方案，它提供了图标换行、窗口拖动、多级开始菜单等功能，使得开发复杂的Web应用变得更加简单和直观。通过下载提供的LinBDesk4.2...
Extjs动态Grid的生成 htm
我们首先从标题"ExtJs动态grid的生成"开始，了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味着在运行时根据需求创建和更新Grid组件，而不是在应用初始化时静态定义。这种灵活性允许开发者更好地响应数据...
在“Extjs动态加载菜单”这个主题中，我们将深入探讨这一功能的实现方式以及相关技术。 首先，动态加载菜单的概念是指菜单项不是在页面加载时一次性全部显示，而是根据用户的操作或特定条件按需加载。这种设计提高...
ExtJS DeskTop
本桌面拓展自ExtJs6.0 DeskTop Demo 主要作如下修改： 1. 修改提示宽度不能自适应问题 2. 增加桌面图标自适应换行 3. 增加桌面图标拖动 4. 解决桌面图标拖动后闪屏问题 ...8. 开始菜单多级菜单 9. 登录窗口
在本文中，我们将深入探讨如何使用ExtJS框架在前端动态生成表格，并结合后端数据进行展示。ExtJS是一个强大的JavaScript库，专用于构建富客户端Web应用程序，尤其在创建交互式用户界面方面表现突出。动态生成表格是...
它模仿了桌面操作系统的基本元素，如任务栏、开始菜单、桌面快捷方式等。在项目中，主要改动的两个文件是"app.js"和"desktop.js"。`app.js`是应用程序的入口点，负责配置和启动整个桌面环境，而`desktop.js`则包含了...
这种动态生成菜单的方法有助于简化用户界面，防止不必要功能的混乱，同时也提高了安全性。 菜单分组是EXTJS权限管理中的一个重要概念，它允许我们将相关的菜单项组织在一起，形成逻辑上的模块。这有助于用户快速...
7. **Desktop环境**：EXTJS 4.2 Desktop MVC 提供了一个仿桌面的界面，包括任务栏、启动菜单、窗口最大化/最小化/关闭等功能，使得Web应用的用户体验更加接近于桌面应用。 8. **性能优化**：EXTJS 4.2在性能方面...
动态树加载菜单是 ExtJS 中一种常见且实用的功能，它允许用户在需要时按需加载树节点，从而提高应用性能，减少初次加载时的数据量。 动态树加载，也称为懒加载或按需加载，是指在用户滚动、展开节点或执行其他操作...
1. **ExtJS Desktop**：这是一种高级的布局模式，模拟了传统的桌面操作系统界面，包括任务栏、桌面图标、启动菜单等元素。在个人/家庭收支系统中，桌面环境提供了一个直观的界面，让用户可以轻松访问不同的功能模块...
这个框架允许开发者创建类似桌面应用的用户界面，提供多窗口、任务栏、快捷方式等特性，使得Web应用看起来和操作起来更像是本地桌面应用。在描述中提到的“改MVC”指的是将原有的代码结构改为Model-View-Controller...
extjs动态生成model、store、panel；sql拼接等多种技术难点
extjs点击右侧面板生成tab，面板是ul+li的
这个压缩包文件的内容看起来是一个完整的EXTJS项目，包含了数据库交互、动态树结构和菜单功能，并且集成了SpringMVC后端框架以及JDBC数据访问层。 1. **EXTJS动态树**： EXTJS的动态树（TreePanel）组件允许开发者...
- 标签“工具”可能是指EXTJS提供的一些辅助工具，如构建工具或者IDE插件，它们可以帮助开发者更方便地管理和生成多语言资源文件，如Sencha CMD或Visual Studio Code的EXTJS插件。 6. **源码管理**： - 对于大型...
"ExtJS 4.2 动态生成Toolbar" 在 ExtJS 4.2 中实现动态生成 Toolbar，以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar，包括视图层、 Toolbar.js 和后台调用...
在Desktop应用中，这些组件被用来构建桌面环境下的各种元素，如快捷方式、任务栏、启动菜单等。通过分析源代码，开发者可以了解如何选择和组合这些组件以满足特定需求。 2. **Desktop组件**：Desktop应用通常由多个...