PDA

View Full Version : Help with loading data for Tree



dusoo
9 Oct 2009, 5:39 AM
Hi,
could you guys show me how am i able to dynamically load a childnode by calling a php file with id of a clicked element?
I was trying to get this information from the examples, but the logic is bit hidden for me ...
Thanks
D>



Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
renderTo:'tree-div',
width: 400,
autoScroll:true,
animate:true,
containerScroll: true,
rootVisible: true,
root: {
nodeType: 'async',
text: 'Test',
id: 'src'
},

dataUrl: 'testTree.php',

});
tree.getRootNode().expand();
});

'testTree.php' - to get data for tree

[{
text: 'To Do',
cls: 'folder',
children: [{
text: "Go jogging",
leaf: true
},{
text: 'Take a nap',
leaf: true
},{
text: 'Climb Everest',
leaf: true
}]
},{
text: 'Remodel Project',
cls: 'folder',
children: [{
text: 'Finish the budget',
leaf: true
},{
text: 'Call contractors',
leaf: true
},{
text: 'Choose design',
leaf: true
}]
},{
text: 'test2',
cls: 'folder'
// ,children: {url: 'test.php?node=test2'}
}
]

aconran
9 Oct 2009, 6:10 AM
You already have everything you need. Put the response for each level in your php code. The id of each node will be posted to the server side as they open each individual node. Only specify children and/or leaf if you don't want the tree to return back to the server-side to get the children of that node.

Watch this sample in Firebug:
http://www.extjs.com/deploy/dev/examples/tree/two-trees.html

Notice how as you open an individual child node it posts the node id and the server-side responds with a different set of children.

Condor
9 Oct 2009, 6:15 AM
You could use:

{
text: 'test2',
cls: 'folder'
loader: new Ext.data.TreeLoader({url: 'test.php?node=test2'})
}

Another method would be to set the url of the loader in the beforeload event.

ps. Appending parameter node=test2 is the default if you configure the node with id:'test2'.

dusoo
9 Oct 2009, 6:35 AM
@Condor
i have tried to put there
loader: new Ext.data.TreeLoader({dataurl: 'test.php?node=test2'})But when i click on test2 node, testTree.php is called and not test.php ...
Thanks for any other tips :)

dusoo
12 Oct 2009, 2:36 AM
Hi,
any idea why it does not work for me ? :(
Thanks
D.

Condor
12 Oct 2009, 4:36 AM
'dataurl' is not a valid config option. It's either 'dataUrl' or 'url'.

dusoo
14 Oct 2009, 2:47 AM
Hi again.

It's still not working, by adding lines below into the testtree.php makes the tree empty, without any nodes.
Any ideas why ?
Isnt it because those lines should not be inside that text file, from which the basic tree structure is created ?

Thanks again



{
text: 'test2',
cls: 'folder',
loader: new Ext.data.TreeLoader({dataUrl: 'test.php'})
// or loader: new Ext.data.TreeLoader({url: 'test.php'})
}