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

 我来答
让你笑了
推荐于2016-03-09 · TA获得超过572个赞
知道小有建树答主
回答量:227
采纳率:50%
帮助的人:288万
展开全部
  1. 登录验证 , 然后 将你的菜单返回 , 格式无所谓 , 只要你最后能从JS中解析出来

  2. 将菜单加到一个toolbar上

  3. 设置菜单的事件

//下面是简单的摘子目前用的的一个例子

/**
 *顶部菜单
 */
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
        }]
楼兰王族
2015-10-26
知道答主
回答量:30
采纳率:0%
帮助的人:12.2万
展开全部
你静态创建菜单会不会 会的话
你会不会怎么把数据库的数据 显示在页面 两者结合起来 具体的没法给你演示
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式