iteye_165
iteye_165
2010-04-22 16:53

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

  • ext
  • javascript

我的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条回答