PDA

View Full Version : TreeLoader directFn



mpawlowski
6 Apr 2010, 12:43 PM
I'm trying to add nodes to a tree using the the directFn function in the treeLoader. Once you expand the node, it does add it to the child but its not displayed in the tree.



var tree = new Ext.tree.TreePanel({
autoScroll: true,
renderTo: 'container1',
width: 150,
height: 300,
root: {
text: 'Test',
id: 'source'
},
loader: new Ext.tree.TreeLoader({
directFn: function(nodeId){
var node = tree.getNodeById(nodeId);
node.appendChild(new Ext.tree.TreeNode({
text: 'FOOBAR'
}));
console.log(tree.getRootNode().childNodes.length)
}
})
});
console.log(tree.getRootNode().childNodes.length)


The console logging shows that initially there are 0 child nodes, then after the expand, there is 1.

Anyone with more experience with directFn or Trees have any ideas?

mpawlowski
6 Apr 2010, 3:28 PM
After digging through the APIs then the source code, I learned a bit about how directFn works. The arguments passed into directFn are the nodeId and a function which does the actual addition of a new node. That function takes 3 parameters, an array of arguments to pass into treeNode creation, the status of the response and the rest of the arguments. With that, I can specify loaders on nodes to have them create nodes on certain levels, like so:


var levelThreeLoader = new Ext.tree.TreeLoader({
directFn: function(nodeId, fn){
fn([{
text: 'Level Three A',
leaf: true
}, {
text: 'Level Three B',
leaf: true
}], {
status: true
})
}
});

var levelTwoLoader = new Ext.tree.TreeLoader({
directFn: function(nodeId, fn){
fn([{
text: 'Level Two A',
leaf: false,
loader: levelThreeLoader
}, {
text: 'Level Two B',
leaf: false,
loader: levelThreeLoader
}, {
text: 'Level Two C',
leaf: false,
loader: levelThreeLoader
}], {
status: true
})
}
});

var levelOneLoader = new Ext.tree.TreeLoader({
directFn: function(nodeId, fn){
fn([{
text: 'Level One A',
leaf: false,
loader: levelTwoLoader
}, {
text: 'Level One B',
leaf: false,
loader: levelTwoLoader
}], {
status: true
});
}
});

var tree = new Ext.tree.TreePanel({
autoScroll: true,
renderTo: 'container1',
width: 200,
height: 400,
root: {
text: 'Root',
},
loader: levelOneLoader,
});

Just an example in case someone else ran into the same issues.