extjs tree如何为每个节点定制各自的右键菜单?

我的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]

2个回答

把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]

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问