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