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桌面的动态开始菜单生成