View Full Version : Add all nodes to a fully expande tree.

29 Nov 2010, 1:43 AM

I have a simple requirement of creating a tree and populating with the results of an sql query. The key points are I want the whole tree loaded (all leaf nodes) on display, and also the whole tree expanded. Additionally, I need to send an Id value to the server for the db query, so it needs to be part of the dataurl (a single call to the url returns the entire tree data in nested json arrays/objects). My current solution is below, however just the root node and it child is loaded (that children and sub children etc are not).

any suggustions?

thanks in advance,


treeLoader = new Ext.tree.TreeLoader({
dataUrl: 'securityHierarchy.do?method=getSecurityHierarchy',
// params: { employeeId: employeeId },
clearOnLoad: true,
preloadChildren :false

treeLoader.on("beforeload", function(treeLoader, node) {
treeLoader.baseParams.employeeId = node.id;
}, this);

securityHierarchyTree = new Ext.tree.TreePanel({

loader: treeLoader,

useArrows: true,
autoScroll: true,
animate: true,
containerScroll: true,
enableDD: true,
ddGroup: 'approvalDDTreeGroup',
// loader: treeLoader,
root: new Ext.tree.AsyncTreeNode({
text: 'Security Hierarchy',
draggable: false


//this is where i am updating the id so its sent to server for query

29 Nov 2010, 1:59 AM
expandAll should do a deep expand, so I don't understand why it shouldn't work. Do the nodes expand by hand?

1. You should be using nodeParameter:'employeeId' in the TreeLoader instead of a beforeload event handler.
2. Wouldn't it be more efficient if your server would return all nodes and all children in one request (and set preloadChildren:true)?

29 Nov 2010, 2:17 AM
Hi Condor,

Thanks for your quick reply.
Yes, i have preloadchildren to true but it then issues a ajax request for each child, however that is prob because i have the request in the beforeload event, as you suggested, I want one ajax request to return data for whole tree.
What do you mean to use nodeParameter:'employeeId' instead of beforeload, i could not find nodeParameter in API. The only reason i am using beforeload is because it was the only way i could inject the employee id into the url,



29 Nov 2010, 2:31 AM
1. If you want to return the entire tree in one request then your server should return the data for all nodes and all children (in the 'children' attribute of a node) as a response to the root node request. For this to work, you need to configure your TreeLoader with preloadChildren:true.

2. nodeParameter is a config option of TreeLoader. It's used as the parameter name of the node id that is sent with every request (default is 'node', but you want 'employeeId').

29 Nov 2010, 3:32 AM

I have added the nodeParameter option and removed the beforeload override and the employeeId is set fine on the request, thanks.
I have preloadChildren set to true, and all the children are now being loaded ,thanks.
One final issue I have is that I would like to reload the entire tree (with new ajax call to get new contents) on request. Is there any way to do this?

thanks again,


29 Nov 2010, 4:06 AM

29 Nov 2010, 5:20 AM
thanks a lot, added that and now works, sweet!!

an issue I am having in a differernt area is typing in text fields.
On each key down I am getting the below error. any ideas?



fn is undefined
h(Object { name="e"})

29 Nov 2010, 5:31 AM
You specified an unknown listener somewhere (you'd get a better error message when you include ext-all.debug.js).