Recursively expanding tree nodes in ExtJS - recursion

Question

Im looking for a way to recursively expand tree nodes. The tree has NOT been loaded to its fullest. We only load one level of depth at a time. So, for example, if my path has 3 levels (/nodeId1/nodeId14/nodeId142) of depth I want to load the first node, then get the level 2 node via the second ID in my path (in this case nodeId14) expand it, then get the the 3rd etc.
However when a node is expanded, there is an AJAX call from the proxy to fetch the data of the node's children and since this call is asynchronous the program itself tries to move forward with expanding the next level node, before the request has time to finish giving me a 'node undefined error' since the level 2 hasn't been loaded yet.
I have been searching for 1 day now on how to solve this but nothing has helped. I found a blog that tackled the same problem but the post is from 2009 and some stuff he uses are deprecated.
http://hamisageek.blogspot.gr/2009/04/extjs-tip-recusively-opening-nodes-in.html
Some code to help:
Ext.define('treeStore',
{
extend : 'Ext.data.TreeStore',
alias: 'widget.treeStore',
autoLoad : false,
model : 'treeModel',
root : {
id: 0,
name : 'Root',
expanded : true,
loaded: true
},
proxy : {
type : 'ajax',
url : 'MyServlet',
reader : {
type : 'json',
root : 'children'
}
},
folderSort: true
});
Ext.define('Ext.tree.Panel',{
.
.
.
//Stuff about the tree panel etc.
dockedItems: {
xtype: 'textfield',
name: 'Search',
allowBlank: true,
enableKeys: true,
listeners: {
specialkey: function (txtField, e) {
if (e.getKey() == e.ENTER){
var searchValue = txtField.getValue();
Ext.Ajax.request({
url: 'MyServlet',
params: {
caseType: 'search',
value: searchValue
},
success: function(response) { //ATTENTION: When calling the .expand() the AJAX hasn't finished and cannot find the node.
response = Ext.decode(response.responseText);
var panel = txtField.up();
response.IDs.forEach(function(entry){
panel.getStore().getNodeById(entry.folderId).expand(); <-problem here
});
}
});
}
}
}
}
I've tried adding functions to the expand() callback, i've tried delayedtask, i've tried setTimer etc. but nothing works. I'm really out of options here and this seems like such a simple thing to make but its driving me crazy.

Answer 1

If you have the path to the node you want to expand, for example saved from a previous call to getPath
var path = node.getPath();
then then task is trivial:
tree.expandPath(path);
You can test this approach at http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#tree-reorder by typing in console:
Ext.ComponentQuery.query('treepanel[title=Files]')[0].expandPath('/Ext JS/app/domain', 'text');
The task is a bit more cumbersome if you do not have a path but you decide which child to expand after the parent is expanded (loaded). In this case you would probably expand with a callback function and continue to expand children in the callback.
See node.expand for details

Answer 2

Here is an updated solution with heavy commenting in order to help people understand what's going on:
TreePanel: {
a: {},
bunch: {},
of: {},
stuff: {},
dockedItems: {
xtype: 'textfield',
name: 'Search Field',
allowBlank: true,
enableKeys: true,
listeners: {
specialkey: function (textfield, keypressEvent) {
if (keypressEvent.getKey() == keypressEvent.ENTER) {
treePanelReference.searchFunction(textfield.getValue());
}
}
}
},
searchFunction: function (searchKey) {
var treepanel = this; //Keeping a reference on the treepanel to have access to its functions inside the `success` callback.
Ext.Ajax.request({
url: '/api/folders/search',
params: {
value: searchKey
},
success: function(response) {
response = Ext.decode(response.responseText);
treepanel.expandFn(-1, response);
};
});
},
expandFn: function(index, response) { //Recursive function.
var folders = response.folders;//This array contains all the folders of the path ordered from the root folder to the one we are searching for.
var node = this.getStore().getNodeById(folders[folders.length-1].folderId);//Attempt to fetch the selected folder (it is the last folder in the array) if it has been loaded.
if (!node) {//If it can't find the node it means it hasn't been loaded, we have to load each folder on the path one by one until we find the one we are looking for.
var i = index + 1;
var nextNode = this.getStore().getNodeById(folders[i].folderId);
if (!nextNode.isExpanded() && !nextNode.isLoaded()) { //If we arrive at a folder that isn't loaded we have to load it.
//Because loading takes time, all actions that are to take place after the load are put in this callback function
//that will be called after the folder has been loaded and expanded.
//We use Ext.pass to have easier control over the scope and arguments.
//We also add {single: true} so that the function isn't called again if we manually reload the node at some point.
nextNode.on("expand", Ext.pass(this.expandFn, [this, i, response]), this, {single:true});
nextNode.expand();
}
else if (!nextNode.isExpanded() && nextNode.isLoaded()) {//If the folder has been loaded but not expanded we simply expand it.
nextNode.expand();
this.expandFn(this, i, response);
}
else {
//Every call to expandFn is made in order to load the next folder on the path,
//recursively until we end up loading its immediate parent node at which point
//we exit the recursion.
this.expandFn(this, i, response);
}
}
else {
//We arrive here if in the previous recursion step we ended up loading the searched folder's immediate parent
//and the call to `getNodeById` returns the folder we're looking for.
//Here we expand the whole path (it might not be expanded fully) up to the folder we are searching for and we also select and focus it.
this.expandPath(node.getPath(), {select: true});
}
}
}