extjs中怎样实现动态主菜单的简单介绍
更新:<time datetime="2022-11-14 06:00">2022-11-14 06:00</time>
本文目录一览:
- ExtJS中怎样实现动态主菜单
- 关于Extjs中 gridpanel里我想实现动态的行浮动菜单
- 关于extjs的问题,extjs的导航菜单问题
- extjs导航面板里面菜单动态生成的怎么做
- 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 有两种类型:
Ext.menu.Item
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
}
]
}