我的web应用中有一个extjs做的树形菜单。我如何为每个树节点定制各自的右键菜单呢？如图那样。我在第一层树显示部门名称时只显示 （新增部门，编辑部门，删除部门，新增组别），第二层显示组别名称时右键菜单只显示（新增组别，编辑组别，删除组别，新增职务）这个几个右键菜单，在第三层显示职务时只显示（新增职务，编辑职务，删除职务）这几个右键菜单。这样应该如何做呢？
我的代码如下：
[code="java"]
var selected;
var loader=new Ext.tree.TreeLoader({
dataUrl:'<?php echo $this->baseUrl();?>/department/tree',
uiProviders:{'col': Ext.tree.ColumnNodeUI}
});
var tree = new Ext.tree.ColumnTree({
rootVisible:false,autoScroll:true,bodyStyle:'padding-left:5px;',
title: '部門管理(提示:在列表上面點擊右鍵可以操作部門,組別和職務資料)',renderTo: 'tree',
columns:[{
header:'名稱',
width:330,
dataIndex:'name'
},{
header:'編號',
width:100,
dataIndex:'number'
},{
header:'负责人',
width:300,
dataIndex:'header'
}],
loader:loader,
root: new Ext.tree.AsyncTreeNode({
id: '-100',icon:'<?php echo $this->baseUrl();?>/html/images/house.png',
text: '部門管理'
})
});
tree.on("contextmenu", function(node, e){
e.preventDefault();
node.select();
selected=new Ext.tree.TreeNode({ id:node.id});
contextmenu.showAt(e.getXY());
},this);
var contextmenu = new Ext.menu.Menu({
id: 'theContextMenu',
items: [
{xtype:"button",text:"新增部門",iconCls:"add",pressed:true,handler:addNewDepartment},
{xtype:"button",text:"編輯部門",iconCls:"edit",pressed:true,handler:editDepartment},
{xtype:"button",text:"刪除部門",iconCls:"delete",pressed:true,handler:deleteDepartment},
{xtype:"button",text:"新增組別",iconCls:"add",pressed:true,handler:addGroup},
{xtype:"button",text:"編輯組別",iconCls:"edit",pressed:true,handler:editGroup},
{xtype:"button",text:"刪除組別",iconCls:"delete",pressed:true,handler:deleteGroup},
{xtype:"button",text:"新增職務",iconCls:"add",pressed:true,handler:addDuty},
{xtype:"button",text:"編輯職務",iconCls:"edit",pressed:true,handler:editDuty},
{xtype:"button",text:"刪除職務",iconCls:"delete",pressed:true,handler:deleteDuty}
]
});
[/code]
把Menu对象和MenuItem对象分别定义,然后再组装成菜单,在右键单击事件中判断隐藏不同的MenuItme对象,调用某一个菜单节点的hide();方法达到隐藏效果
另外建议你看api创建Action对象也就是菜单的节点对象,也是分别创建,Action对象应该是菜单节点对象的父类,不要隐藏某个菜单,而是让某个菜单项不可用disabled();这样是最好的解决办法.
[code="js"]
tree.on("contextmenu", function(node, e){
e.preventDefault();
node.select();
var contextmenu;
if (node.getDepth() === 1) {
contextmenu = new Ext.menu.Menu({
id: 'theContextMenu',
items: [
{xtype:"button",text:"新增部門",iconCls:"add",pressed:true,handler:addNewDepartment},
{xtype:"button",text:"編輯部門",iconCls:"edit",pressed:true,handler:editDepartment},
{xtype:"button",text:"刪除部門",iconCls:"delete",pressed:true,handler:deleteDepartment}
]
});
} else if (node.getDepth() === 2) {
contextmenu = new Ext.menu.Menu({
id: 'theContextMenu',
items: [
{xtype:"button",text:"新增組別",iconCls:"add",pressed:true,handler:addGroup},
{xtype:"button",text:"編輯組別",iconCls:"edit",pressed:true,handler:editGroup},
{xtype:"button",text:"刪除組別",iconCls:"delete",pressed:true,handler:deleteGroup}
]
});
} else {
contextmenu = new Ext.menu.Menu({
id: 'theContextMenu',
items: [
{xtype:"button",text:"新增職務",iconCls:"add",pressed:true,handler:addDuty},
{xtype:"button",text:"編輯職務",iconCls:"edit",pressed:true,handler:editDuty},
{xtype:"button",text:"刪除職務",iconCls:"delete",pressed:true,handler:deleteDuty}
]
});
}
selected=new Ext.tree.TreeNode({ id:node.id});
contextmenu.showAt(e.getXY());
},this);
[/code]