ExtJs动态开始菜单

逃离我推掉我的手 2022-06-13 03:44 259阅读 0赞

# 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进行数据加载并实现开始菜单动态加载和绑定，并且生成桌面

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

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