ExtJs动态开始菜单

ExtJs Desktop桌面开始菜单动态生成

ExtJs框架是目前市面上采用比较成熟的js框架，有着诸多优点特别适合用来实现一些内部的管理信息系统.ExtJs提供了一套组件来开发类似于windows桌面的单页面系统，其中desktop桌面的开始菜单按照后台提供的数据动态生成也是一个难点，下面将对desktop桌面动态开始菜单的生成进行介绍。

ExtJs官方提供了desktop桌面的demo，其中关于开始菜单的生成是静态的方式，在js脚本中设置好了固定的开始菜单内容再生成开始菜单。本文的讲解内容均是在官方demo基础上进行的修改

整个需要改进的脚本只有两个一个是根目录下的App.js以及BogusModule.js，前台与后台之间通过Ajax交互，数据交换个是为json

后台定义了Mids类，如下所示：

public class Mids {
private String mid; //菜单id
private String text;    //菜单名词
private String path;    //菜单路径
private List<Mid> subs;     //子菜单
//Mid作为Mids内部类
public class Mid {
private String mid;
private String text;
private String path;
}
}

因此前后台交互的json数组示例如下：

[{mid:”m1”,text:”菜单1”,path:”/m1”,subs:null},{mid:”m2”,text:”菜单2”,path:”/m1”,subs:[mid:”m21”,text:”菜单21”,path:”/m21”}]

接下来我们就要修改App.js这个js文件

getModules : function(){
//        return [
//            //new MyDesktop.Blockalanche(),
//            //new MyDesktop.BogusMenuModule(),
//            //new MyDesktop.BogusModule()
//
//        ];
return mArr;
},

//找到这段代码并注释掉部分行并修改为return mArr，其中mArr就是开始菜单模块会在另一个js文件中定义

下面我们就看核心的BogusModule.js这个文件，这个文件定义了开始菜单的生成方式和类型

//首先需要定义一个模块类型MyDesktop.BogusModule
Ext.define(
'MyDesktop.BogusModule',
{
extend: 'Ext.ux.desktop.Module',
init:function () {},
createWindow: function (obj) {
var desktop = this.app.getDesktop();
createWindow(desktop,obj);//该方法另外定义
}
});

菜单数组以及Menu模型与后台传递的json数据进行绑定

var mArr = [];
Ext.define('Menu', {
extend: 'Ext.data.Model',
fields: ['mid', 'text', 'path','subs']
});
//

定义了一个store采用Ajax方式与后台进行是数据交互store进行数据加载并实现开始菜单动态加载和绑定，并且生成桌面

var store = Ext.create('Ext.data.Store', {
model: 'Menu',
proxy: {
type: 'ajax',
url: 'menu',
reader: 'json'
}
});

store.load({
scope: this,
callback: function (r, op, success) {
if (success) {
for (var i = 0; i < r.length; i++) {
var menu = Ext.define('MyDesktop.materialMenu', {
extend: 'MyDesktop.BogusModule',
init: function () {
var mm=this;
//判断是否有子菜单，有子菜单则设置为点击无效
if (r[i].data.subs) {
mm.launcher = {
text: r[i].data.text,
iconCls: 'bogus',
handler: function () {
//有子菜单则点击无效
return false;
},
menu: {items: []}
};
//遍历子菜单数据并生成子菜单项
Ext.Array.each(r[i].data.subs, function (m, index, allItems) {
mm.launcher.menu.items.push({
text: m.text,
iconCls: 'bogus',
handler: function (src) {
var desktop = mm.app.getDesktop();
createWindow(desktop,src);
},
//scope: this,
src: m.path,
windowId: m.mid
});
});
} else {
//没有子菜单则设置点击打开窗口
mm.launcher = {
text: r[i].data.text,
iconCls: 'bogus',
handler: this.createWindow,
scope: this,
src: r[i].data.path,
windowId: r[i].data.mid
};
}
}
});
mArr.push(new menu());
}

// 生成桌面
var myDesktopApp;
Ext.onReady(function () {
myDesktopApp = new MyDesktop.App();
});
}
}
});

定义对应的打开窗口模块，每个窗口模块均内嵌了一个iframe，通过该iframe可以加载其它页面内容

function createWindow(desktop,obj) {
var win = desktop.getWindow('bogus' + obj.windowId);
if (!win) {
var iframeId = 'bogus_' + obj.windowId;
win = desktop
.createWindow({
id: 'bogus' + obj.windowId,
title: obj.text,
//width: 800,
//height: 600,
maximizable: true,
maximized: true,
closable: true,
resizable: true,
html: "<iframe id='"
+ iframeId
+ "' style='width:100%;height:100%;border:0px;margin:0px;padding:0px;' frameborder='0' src=''></iframe>",
iconCls: 'bogus',
animCollapse: false,
constrainHeader: true,
listeners: {
afterrender: function () {
document
.getElementById(iframeId).src = obj.src;
}
},
buttons: [
{
text: '刷新窗口内容',
handler: function () {
document
.getElementById(iframeId).src = obj.src;
}
}, {
text: '切换窗口大小',
handler: function () {
win.toggleMaximize();
}
}, {
text: '关闭',
handler: function () {
win.close();
}
}]
});
}
win.show();
return win;
}

这样就完成了ExtJs桌面的动态开始菜单生成