Getting tree node ID on clicking the context menu

[jst4fun]

Hi,
After searching through forum and also going through the tutorials I was able to create a tree with context menu. Now the problem is how to get the node id on which the context menu option is called. Here is my code


Ext.onReady(function(){
var Tree = Ext.tree;

var tree = new Tree.TreePanel({
el:'tree-div',
useArrows:true,
autoScroll:true,
animate:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'fetchTreeData.php'
})
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Destination',
draggable:false,
id:'source'
});

tree.setRootNode(root);
tree.on('contextmenu', createContext);

var ctxMenu = new Ext.menu.Menu({
id:'copyCtx',
items: [
{
id:'add',
handler:addNode,
text:'Add'
},
{
id:'edit',
handler:editNode,
text:'Edit'
},
{
id:'delete',
handler:deleteNode,
text:'Delete'
}
]
});

function createContext(node, e){
ctxMenu.show(node.ui.getAnchor());
}
tree.render();
root.expand();

function editNode(){

}

function deleteNode(){

}

function addNode(){

}
});

I would like to get the node id to the editNode(), deleteNode() and addNode() functions. How is it possible? Thanks

[Animal]

Store it somewhere!

If you were using a class instead of function soup, you'd just use



this.contextNode = new;


In your context menu handler, and then the other class member functions would be able to reference that node as "this.contextNode".

[jst4fun]

Thanks Animal..Do that mean I will have to rewrite everything as a class? Is there no other way to fetch the ID of the currently selected node using the current code I have implemented?? What did you mean by "Store it somewhere"? Even if I store is somewhere how would I know on which node the context menu is activated in order to use the stored id? Sorry for so much questions...I am way too confused..:)

[Animal]

Poke the node into the menu, the handlers have access to the menu IIRC

[jst4fun]

I searched a lot in extjs API and also using google. I am not able to understand using which method I can access the node id through the context menu. I tried adding


items: [
{
id:'add',
handler:function(e){
alert(e.id);
},
text:'Add'
}

and all i get is the the menu ID :( ....Animal, if you dont mind could you please illustrate on how to add node into context menu....I am really lost :((

[Animal]

contextMenu.node = node

[jst4fun]

Thanks Animal...It worked..

[maraqa84]

where should I put the "contextMenu = node " ?????????

please help i am getting crazy with EXT-JS

[cfmunster]

I found another answer to this problem from another thread:

http://extjs.com/forum/archive/index.php/t-2430.html

you can get the tree node where the context menu popped up like this:

tree.getSelectionModel().getSelectedNode();

[abhishek611plus]

your code in nice.. but there is some problem .. forcefully i hv to select node and then right click...

is there any solution ... so tht i can directly get the node id in context menu

[Animal]

http://extjs.com/deploy/dev/docs/?class=Ext.tree.TreePanel&member=contextmenu

[Saibanna]

Declare global variable
var currentNode = ''; // I put inside init

Register handler
this.navTree.on('contextmenu', this.treeContextMenu, this);

//my treeContextMenu implementation, note initialization of currentNode
treeContextMenu: function (node, e) {
this.currentNode = node;
this.treeMenu = new Ext.menu.Menu();
this.treeMenu.add(
{id:'duplicate',text:'Duplicate'},
{id:'delete',text:'Delete'});
this.treeMenu.on('itemclick', this.handleTreeMenuClick, this);
this.treeMenu.show(e.target);
},

handleTreeMenuClick: function(node, e) {
if (node.id == 'duplicate') {
this.duplicate(node, e);
} else if (node.id == 'delete') {
this.deleteNode(node, e);
}
},

duplicate: function(node, e) {
//This is how you can access node
this.currentNode;
},

deleteNode: function(node, e) {
var msg = msg = "Do you really want to delete style '" + this.currentNode.text + "' and all of its attributes?";
Ext.MessageBox.confirm(
'Confirm Delete',
msg,
function(val) { if (val=="yes") this.deleteNode(this.currentNode); });
},

Hope this helps.