古董鉴赏之ExtJS ExtJs

Extjs Desktop桌面开始菜单动态生成ExtJs框架是目前市面上选用比较成熟的js框架。具有诸多优点特殊适合用来实现有的内部的管理消息系统.ExtJs提供了一套组件来研究类似于windows桌面的单页面系统。之中desktop桌面的开始菜单根据后台提供的资料动态生成也是一个难点。下面将对desktop桌面动态开始菜单的生成进行讲解。
ExtJs官网提供了desktop桌面的demo 。之中关于开始菜单的生成是静态的方法。在js脚本中设置好了特定的开始菜单内容再生成开始菜单。<font color=red>本文的教学内容均是在官网demo基本上进行的改写</font>
整个需要改进的脚本只有两个一个是根目录下的软件.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”}]
【古董鉴赏之ExtJS ExtJs】接下来我们就要改写软件.js这种js文件
getModules : function(){// return [// //new MyDesktop.Blockalanche(),// //new MyDesktop.BogusMenuModule(),// //new MyDesktop.BogusModule()// // ]; return mArr;},//寻找这段代码并注释掉部分行并改写为return mArr 。之中mArr就是开始菜单模块会在另外一个js文件中定义下面我们就就这样看核心的BogusModule.js这种文件。这种文件定义了开始菜单的生成方法和类别
//首先需要定义一个模块类别MyDesktop.BogusModuleExt.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 myDesktop软件; Ext.onReady(function () { myDesktop软件 = new MyDesktop.软件(); }); }}});定义对应的打开窗口模块。每一个窗口模块均内嵌了一个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=http://www.shenzhoubaby.com/''>", 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桌面的动态开始菜单生成