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
}]
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询