Event handler syntax: returning data from a Tree

[jester]

First of all I would like to say that I am very impressed by Ext and I am willing to learn some of the details but I just need a little help. Let me give you a practical example of what I am trying to do: I am trying to modify the files /examples/tree/(reorder.html & reorder.js) to talk to a database.

This is the js, pretty much unmodified except I have changed the dataUrl to coldfusion


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

var tree = new Tree.TreePanel('tree-div', {
animate:true,
loader: new Tree.TreeLoader({dataUrl:'get-nodes.cfm'}),
enableDD:true,
containerScroll: true
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Website Root',
draggable:false,
id:'0'
});
tree.setRootNode(root);

// render the tree
tree.render();
root.expand();
});

That works great! Now my newbie question is how to get the data back to the server when it has been modified? The two ways that I see are:

1. Have a "Save" button, that when clicked transfers the entire tree (either through an (a) AJAX request or (b) sending the user to a "save" page).
2. Initiating an AJAX "save" when the user moves a node.

So, ignoring (1) for now, what is the way to implement (2)? What is the syntax for adding an on move event handler?

So given the API reference:


on(String eventName, Function handler, [Object scope], [Object options])

I tried adding this to see what the syntax was but no dice:


function x() {
alert('Move');
}

tree.on('move', x());

Any guidance appreciated.

[evant]

Since I'm not sure of your wider scope, try this:



tree.on('move', function(tree, node, oldParent, newParent)
{
alert('Node moved: ' + node.text);
alert('Old parent: ' + oldParent.text);
alert('New parent: ' + newParent.text);
//make your callback here.
}, this);


Note in the API reference, depending on which event you use, different parameters get passed to your callback method, see: http://extjs.com/deploy/ext/docs/output/Ext.tree.TreePanel.html#event-move

[jester]

Thanks evant! That is fantastic....!

I notice that calling alert() works fine with Firebug disabled, but as soon as it's enabled it gives the following error:


[Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMMouseEvent.type]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://devx.ud.co.nz/ext/ext-all.js :: anonymous :: line 17" data: no]
[Break on this error] Ext.EventManager=function(){var _1,_2,_3=false;var _4,_5,_6,_7;var E=Ext.lib.Eve...


Is that anything to be concerned about? I assume that the alert() messes up some other call?

In order to avoid that, I changed the alert() calls to console.log() calls which is probably a better way to trace things.


tree.on('move', function(tree, node, oldParent, newParent, index)
{
console.log('Node moved: ' + node.text);
console.log('Old parent: ' + oldParent.text);
console.log('New parent: ' + newParent.text);
//make your callback here.
}, this);




Once again, thanks for the syntax help!

[jester]

In order for me to better understand the syntax involved, how do you move the function outside of the event handler?

e.g., something along the lines of:


function saveNode(tree, node, oldParent, newParent) {
console.log('Node moved: ' + node.text);
console.log('Old parent: ' + oldParent.text);
console.log('New parent: ' + newParent.text);
}

tree.on('move', saveNode(), this);

Is that possible?

[evant]

Yep, that should work.

[jester]

Okay, I must be doing something wrong then.


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

var tree = new Tree.TreePanel('tree-div', {
animate:true,
loader: new Tree.TreeLoader({dataUrl:'get-nodes.cfm'}),
enableDD:true,
containerScroll: true
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Root',
draggable:false,
id:'0',
});
tree.setRootNode(root);

/* Working version of handler
tree.on('move', function(tree, node, oldParent, newParent, index)
{
console.log('Node moved: ' + node.text + ' [' + node.id + ']');
console.log('Old parent: ' + oldParent.text + ' [' + oldParent.id + ']');
console.log('New parent: ' + newParent.text + ' [' + newParent.id + ']');
console.log('Index: ' + index);
//make your callback here.
}, this);
*/

function saveNode(tree, node, oldParent, newParent) {
console.log('Node moved: ' + node.text);
console.log('Old parent: ' + oldParent.text);
console.log('New parent: ' + newParent.text);
}

tree.on('move', saveNode(), this);

// render the tree
tree.render();
root.expand();
});

Firebug:


node has no properties
[Break on this error] console.log('Node moved: ' + node.text);

It seems that the function is either processed or called straight away on loading the page?? I didn't think I could mess up declaring a function, but maybe I have?

[tryanDLS]

Remove the parens from saveNode - the function needs to be called when the event is triggered, not immediately when you add the handler.

tree.on('move', saveNode, this);

[jester]

Ahhh *slaps head!*

Thanks!