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

ExtJs Desktop桌面开始菜单动态生成ExtJs框架是目前市面上选用比较成熟的js框架，具有诸多优点特殊适合用来实现有的内部的管理消息系统.ExtJs提供了一套组件来研究类似于windows桌面的单页面系统，之中desktop桌面的开始菜单根据后台提供的资料动态生成也是一个难点，下面将对desktop桌面动态开始菜单的生成进行讲解。

ExtJs官网提供了desktop桌面的demo，之中关于开始菜单的生成是静态的方法，在js脚本中设置好了特定的开始菜单内容再生成开始菜单。本文的教学内容均是在官网demo基本上进行的改写

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

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

public class Mids { private String mid; //菜单id private String text; //菜单名词 private String path; //菜单路径 private List 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”}]

接下来我们就要改写软件.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进行资料加载并实现开始菜单动态加载和绑定，并且生成桌面