ext js tree: How load nodes dynamically when afterrender event occured?

Question

The main task is to open dinamically one branch using ajax after tree panel loaded. User should not do any click. It should expanded itself after page loaded.

I tried to use afterrender event to load nodes recursively. But I cannot get current tree object there. It's empty at this step.

It's like expandAll calling. This code also doesn't work on afterrender event:

  tree.expandAll(function() {
     tree.getEl().unmask();
    toolbar.enable();
  });

So, how I can load node using ajax?

UPDATE 1: the code from above is working now. I just add this code after "tree" definition. But the question is still here. How load one node using ajax?

Answer 1

Can't you use a tree store like most examples? If you do, the tree will request nodes from the store automatically, and the store will load things from the server. Given your server code can send back branches given a specific node.

See the Sencha Kitchen Sink demos of a tree working against the server with a TreeStore.

If you open the Developer Tools in Chrome, go to the Network tab and then expand a node in the tree you will see that the TreeStore will load the children of that node automatically by requesting data from "get-nodes.php" given the id of the node that was expanded.

You can exapnd the node by simply calling .expand() on it.

If that doesn't work, you could just load the model and when you have it, add it to the tree and expand the parent like so:

MyApp.model.MyTreeModel.load(someId, {
    success: function (record, operation) {
        // If the third param is true the search will be recursive from the supplied node
        var node = tree.getRootNode().findChild('id', someParentId, true);
        node.addChild(record);
        node.expand();
    },
    scope: this
}); 

Your question is a bit broad so I hope this helps you on the way.

You may want to have a look at the Ext.data.NodeInterface documentation about how to manipulate trees.