extjs中怎样实现动态主菜单的简单介绍

发布时间:2023-12-08

extjs中怎样实现动态主菜单的简单介绍

更新:<time datetime="2022-11-14 06:00">2022-11-14 06:00</time>

本文目录一览:

  1. ExtJS中怎样实现动态主菜单
  2. 关于Extjs中 gridpanel里我想实现动态的行浮动菜单
  3. 关于extjs的问题,extjs的导航菜单问题
  4. extjs导航面板里面菜单动态生成的怎么做
  5. Extjs中如何使用数据库中的数据,创建动态菜单

ExtJS中怎样实现动态主菜单

Ext.Ajax.request({
    //后台请求数据
    url: 'xxx.php',
    success: function (response) {
        var data = Ext.decode(response.responseText);
        //创建空的工具条
        var MenuBar = Ext.create('Ext.toolbar.Toolbar');
        for (var i = 0; i < data.length; i++) {
            var Menu = data[i];
            MenuBar.add({
                text: Menu.text,
                handler: 跳转页面函数,一般要传参
            });
        }
        MenuBar.doLayout();
    }
});

注意: 以上代码未亲测过,也许会有点问题,遇到了再追问吧。

关于Extjs中 gridpanel里我想实现动态的行浮动菜单

tip 是干啥的啊,就是提示呗,是放在目标上出来的一行提示。鼠标放 tip 上有什么用? 想不消失就把目标的 mouseout 截了啊。 恩,浮动菜单可以的,往里加呗。

关于extjs的问题,extjs的导航菜单问题

Ext.menu.Menu 对象里的 ITEM 有两种类型:

  1. Ext.menu.Item
  2. Ext.menu.Menu 的嵌套 你说的 3 级菜单就是 Ext.menu.Menu + Ext.menu.Menu + Ext.menu.Item 的嵌套。 具体用 add 方法添加。 部分代码如下:
var hmenu_copy = new Ext.menu.Menu();
hmenu_copy.add({
    text: 'level2',
    iconCls: 'x-group-by-icon',
    menu: [{
        text: 'level3',
        handler: 
    }]
});

由于是项目截码,具体自己加其他环境。还有问题请追加。

extjs导航面板里面菜单动态生成的怎么做

AJAX 请求后台,然后遍历返回结果,每个结果 new 一个 item,添加到 menu 就好了。

Extjs中如何使用数据库中的数据,创建动态菜单

登录验证,然后将你的菜单返回,格式无所谓,只要你最后能从 JS 中解析出来。 将菜单加到一个 toolbar 上。 设置菜单的事件。 下面是一个简单的例子:

/**
 * 顶部菜单
 */
Ext.define('XRS.page.bar.Top', {
    extend: 'Ext.toolbar.Toolbar',
    dock: "top",
    border: "1 0 2 0",
    initComponent: function () {
        var me = this;
        // 这里是对菜单进行解析,因为我从后台返回来的是列表,而不是一个树,所以需要解析成菜单的格式
        // 参数 $Admin.getMainMenu() 这个是从后台返回数据的一个简单包装,在下面我一个样本
        var mainMenu = this.parseMenu($Admin.getMainMenu());
        me.items = mainMenu;
        this.callParent();
    },
    // 解析成菜单格式的数据
    parseMenu: function (menus) {
        var me = this;
        if (!(menus && menus.length && 0)) return false;
        // 根据 parentid 生成树
        var map = {};
        var rs = [];
        Ext.each(menus, function (n) {
            n.id = "mainmenu_" + n.id;
            n.text = n.name;
            // 这里是设置点击事件的,通过 bind,不需要设置 scope
            n.handler = Ext.bind(me.onClick, me);
            // 下面的只是生成一个菜单的数据格式
            map[n.id] = n;
            // 如果找到父节点
            if (map["mainmenu_" + n.parentid]) {
                var pn = map["mainmenu_" + n.parentid];
                if (!pn.menu) {
                    pn.hideOnClick = false;
                    pn.menu = {
                        items: []
                    };
                }
                if (n.isSeparator == "1") n.xtype = "menuseparator";
                pn.menu.items.push(n);
            } else {
                if (n.isSeparator == "1") n.xtype = "tbseparator";
                rs.push(n);
            }
        }, this);
        return rs;
    },
    // 这是一个点击事件
    onClick: function (menu, e) {
        if (!menu) return;
        // 可以任意设置事件
        alert(menu.text);
        // this.fireEvent('moduleclick', menu, 'menu');
    }
});

下面是一个返回的菜单数据样本(是个列表):

{
    "mainMenu": [
        {
            "$id": "14",
            "id": 53,
            "name": "基础信息",
            "code": "",
            "menutype": null,
            "module": "",
            "moduleConfig": "    ",
            "method": "    ",
            "isWindow": null,
            "url": null,
            "iconCls": "ico_baseinfo",
            "parentid": 1,
            "path": "1,53",
            "ix": 24,
            "privilege": "6",
            "isSeparator": 0,
            "xtype": null,
            "disabled": null,
            "noprivilege": 0
        },
        {
            "$id": "35",
            "id": 54,
            "name": "系统代码管理",
            "code": "",
            "menutype": null,
            "module": "XRS.baseinfo.code.List",
            "moduleConfig": "    ",
            "method": "    ",
            "isWindow": null,
            "url": null,
            "iconCls": "ico_code",
            "parentid": 53,
            "path": "1,53,54",
            "ix": 1,
            "privilege": "7",
            "isSeparator": 0,
            "xtype": null,
            "disabled": null,
            "noprivilege": 0
        },
        {
            "$id": "36",
            "id": 55,
            "name": null,
            "code": null,
            "menutype": null,
            "module": null,
            "moduleConfig": null,
            "method": null,
            "isWindow": null,
            "url": null,
            "iconCls": null,
            "parentid": 53,
            "path": "1,53,55",
            "ix": 2,
            "privilege": "7",
            "isSeparator": 1,
            "xtype": null,
            "disabled": null,
            "noprivilege": 0
        },
        {
            "$id": "37",
            "id": 57,
            "name": "部门机构",
            "code": "",
            "menutype": null,
            "module": "XRS.baseinfo.organization.List",
            "moduleConfig": "    ",
            "method": "    ",
            "isWindow": null,
            "url": null,
            "iconCls": "ico_org",
            "parentid": 53,
            "path": "1,53,57",
            "ix": 3,
            "privilege": "8",
            "isSeparator": 0,
            "xtype": null,
            "disabled": null,
            "noprivilege": 0
        },
        {
            "$id": "38",
            "id": 58,
            "name": "用户",
            "code": "",
            "menutype": null,
            "module": "XRS.baseinfo.user.List",
            "moduleConfig": "    ",
            "method": "    ",
            "isWindow": null,
            "url": null,
            "iconCls": "ico_user",
            "parentid": 53,
            "path": "1,53,58",
            "ix": 4,
            "privilege": "9",
            "isSeparator": 0,
            "xtype": null,
            "disabled": null,
            "noprivilege": 0
        },
        {
            "$id": "39",
            "id": 59,
            "name": "角色",
            "code": "",
            "menutype": null,
            "module": "XRS.baseinfo.role.List",
            "moduleConfig": "    ",
            "method": "    ",
            "isWindow": null,
            "url": null,
            "iconCls": "ico_role",
            "parentid": 53,
            "path": "1,53,59",
            "ix": 5,
            "privilege": "10",
            "isSeparator": 0,
            "xtype": null,
            "disabled": null,
            "noprivilege": 0
        }
    ]
}