tree context menu event acting on tree

[garyrgi]

Hello all,

I was wondering if someone a tad more familiar with the tree panel and how to interact with it could nudge me in the right direction.

I have a tree panel that is lazy loaded via a remote call, I also have a context menu that is loaded via a remote call as well, it could be static as this point but I was testing...here is the menu, its basically returned every time at the moment:


{menu: [
new Ext.menu.Item({
text: 'Add'
}),
new Ext.menu.Item({
text: 'Edit'
})
,
new Ext.menu.Item({
text: 'Delete',
handler:function(e){Ext.Msg.confirm('Confirm','Are you sure you want to do that?',delItem);}
})
]
}


As you can see i have a function that I want to call when a user clicks on the delete menu option. Here is the code for my tree



<script language="javascript">
Ext.menu.Menu.prototype.load = function( options ){
var loader = new Ext.menu.Item({text: 'Loading...'});
var conn = new Ext.data.Connection();

this.addItem(loader);

conn.on('requestcomplete', function( conn, response ){
this.remove(loader);
response = Ext.decode(response.responseText);
Ext.each( response.menu, function( item ){ this.add( item ) }, this);
}, this);

conn.on('requestexception', function(){
this.remove(loader);
this.add({text: 'Failed to load menu items'});
}, this);

conn.request( options );
}
</script>
<script language="javascript">
var TreeTest = function(){
var Tree = Ext.tree;
return {
init : function(){
var loader = new Tree.TreeLoader({dataUrl:'menu.cfc?method=gettree'});

loader.on('beforeload', function(loader, node){
loader.dataUrl = 'menu.cfc?method=gettree&id='+node.attributes.id;
});

var tree = new Tree.TreePanel('treeView', {
animate:false,
loader: loader,
enableDD:true,
containerScroll: true
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Kategorie',
draggable:false,
id:'0'
});
tree.setRootNode(root);
// render the tree
tree.render();
//enable a context menu
tree.on('contextmenu', this.menuShow, this);
// false for not recursive (the default), false to disable animation
root.expand();
},

menuShow: function( node ){
var ctmenu=new Ext.menu.Menu();
//context menu calls the context menu generator
ctmenu.load({url:'menu.cfc?method=getContextMenu&hasChildren='+!node.isLeaf()});
ctmenu.show(node.ui.getAnchor());
}

};
}();
function delItem (i){
//var r = Tree.getRootNode();
alert("hello");
}
function contextMenu(v){
var ctmenu=new Ext.menu.Menu();
//context menu calls the context menu generator
ctmenu.load({url:'menu.cfc?method=getContextMenu&hasChildren='+!v.isLeaf()});
ctmenu.show(v.ui.getAnchor());

};

Ext.onReady(TreeTest.init, TreeTest, true);

</script>

The problem is I can't seem to reference my tree from my delete function. Ideally when the user clicks the delete option in the context menu I want to delete the selected node.

I have tried to reference it a number of different ways but I can't seem to get to it.

Any pointers or help would be appreciated.

Thanks in advance,

Gary

[DigitalSkyline]

function delItem (i){
//var r = Tree.getRootNode();
alert("hello");
}


Just a quick glance at this code tells me tree != Tree, remember JavaScript is Case sensitive! Your Tree = Ext.tree

[Animal]

The variable "Tree" only exists in the scope of the anonymous function that is used to return a value into the "TreeTest" variable.

For functions to be able to use that variable, they'll have to be defined inside the scope of that anonymous function.

[garyrgi]

Thanks Animal,

So what you are saying is that I need to have my delItem function


...
},

menuShow: function( node ){
var ctmenu=new Ext.menu.Menu();
//context menu calls the context menu generator
ctmenu.load({url:'menu.cfc?method=getContextMenu&hasChildren='+!node.isLeaf()});
ctmenu.show(node.ui.getAnchor());
},
delItem: function(e){
//some code to get the currently selected node,...how?
//call serverside delete function and have callback remove node from tree
}


do I need to change the scope of the function call in the confirm click handler?

Thanks

Gary

[DigitalSkyline]

Gary -
the scope then would be TestTree.delItem or this.delItem
You may also want to add -

var tree, root, etc; //variables within the scope of the TestTree object.
var Tree = Ext.tree;

If you want to access the created tree and not just Ext tree reference.

[garyrgi]

Gary -
the scope then would be TestTree.delItem or this.delItem
You may also want to add -

var tree, root, etc; //variables within the scope of the TestTree object.
var Tree = Ext.tree;

If you want to access the created tree and not just Ext tree reference.

Ahh, guess it comes down to a scoping issue then afterall, and what is and what is not available...

Thanks guys for the help, I will give your suggestions a try.

Gary