ExtJs: Tree: how download then select using AJAX calls ?

Question

Hi,

Here's my goal : - open a tree - download the root nodes - expand automatically one specific node using AJAX (and loop n times here) until i find a leaf then select the leaf

Here's the function that works when I declare the Tree :

        listeners: {
            load: function(n) {
                console.log('load(n)');
                n.eachChild(
                    function(n) {
                        if ((n.id=='lys/2007') ||
                            (n.id=='lys/2007/08') ||
                            (n.id=='lys/2007/08/29')) {
                            n.expand(false,false);
                        }
                    });
            }
        }

But if I don't know how to make it more "generic" (almost exactly like the ExtJs documentation). But they don't jump automatically to a specific node (i.e. I want no user interaction).

Any idea / advice how to do this?

Don't hesitate to edit my post to make it proper English :)

Answer 1

If you already have a handle to your node, use node.getPath() to get the full "path" of it, and then use selectPath to "select" it programatically.

tree.selectPath(node.getPath());

Since you seem to know the exact path, you can probably just call selectPath on the tree.

tree.selectPath('lys/2007/08/29'); //adjust to match node.getPath() format

Answer 2

Hi,

Thanks for the answer. Here's the code that works : I moved it outside, into the TreeLoader object, this way :

var lysTreeLoader = new Ext.tree.TreeLoader({
    dataUrl: 'json/lys.php',
    listeners: {
        load: function(loader,n,response) {
        console.log('Données chargées');
        n.eachChild(
            function(n) {
                if ((n.id=='lys/2007') ||
                    (n.id=='lys/2007/08') ||
                    (n.id=='lys/2007/08/29')) {
                    n.expand(false,false);
                }
                if (n.id=='lys/2007/08/29/21_14_04') {
                    n.select();
                    console.log(n.id);
                    console.log(n.getPath());
                }
            });
        }
    }
});

Then in the tree declaration, declare the lysTreeLoader :

...blabla...
id: 'treepanel-labys',
xtype: 'treepanel',
width: 400,
autoScroll: true,
split: true,
// use a TreeLoader :
loader: lysTreeLoader,
...blabla...

And I just had to use the function select(); (which didn't work as expected in my question)

Thanks again !