Recursively expanding tree nodes in ExtJS

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