extjs desktop startmenu (開始菜單)

extjs desktop 的開始菜單 二級菜單,僅僅是簡單演示實現原理,如 需要動態生成,本身改造就能夠,下面基本方法原理:

首先 創建一個js文件 生成開始菜單數據:



function GetStartMenu(app) {
    var menuArray = [];

    var m = {
        launcher: {
            text: '開始菜單第一級A',
            iconCls: 'icon-grid',
            handler: function() {
                return false;
            },
            menu: {
                minWidth: 127,
                items: []
            }
        }
    };

    m.launcher.menu.items.push({
        winId: 'menua01',
        winUrl: 'abc/abcd.html',
        text: '開始菜單第二級A01',
        maximized: false,
        iconCls: 'icon-grid',
        scope: this,
        handler: function(src) {
             var desktop = app.getDesktop();
            var win = desktop.getWindow('menua01');
            if (!win) {
                win = desktop.createWindow({
                    border: false,
                    id: 'menua01',
                    title: '開始菜單第二級A01',
                    width: 600,
                    height: 500,
                    maximized: true,
                    maximizable: true,
                    resizable: true,
                    iconCls: 'icon-grid',
                    hideMode: 'offsets',
                    constrain: true,
                    layout: 'fit',
                    loader: {
                        url: 'abc/abcd.html',
                        autoLoad: true,
                        scripts: true
                    }
                });
            }
            win.show();
            return win;
        }
    });


    m.launcher.menu.items.push({
        winId: 'menua02',
        winUrl: 'abc/bbbb.html',
        text: '開始菜單第二級A02'
        maximized: false,
        iconCls: 'icon-grid',
        scope: this,
        handler: function(src) {
            var desktop = app.getDesktop();
            var win = desktop.getWindow('menua02');
            if (!win) {
                win = desktop.createWindow({
                    border: false,
                    id: 'menua02',
                    title: '開始菜單第二級A02',
                    width: 800,
                    height: 600,
                    maximized: false,
                    maximizable: true,
                    resizable: false,
                    iconCls: 'icon-grid',
                    hideMode: 'offsets',
                    constrain: true,
                    layout: 'fit',
                    loader: {
                        url: 'abc/bbbb.html',
                        autoLoad: true,
                        scripts: true
                    }
                });
            }
            win.show();
            return win;
        }
    });

    menuArray.push(m);

    return menuArray;
}

在主頁面引入該文件 而後改動app.js,找到 getModules: function () {  刪除裏面內容 改成:

   getModules: function () {
           return GetStartMenu(this);
    },

就能夠實現開始菜單的二級菜單