View Full Version : Dynamic tree refresh

23 Sep 2011, 12:48 AM

We have a tree which is loaded dynamically. When a user clicks on expand, the children are loaded and added to the tree. This works all and well, but I've ran into a problem. When we want to refresh this tree, (keeping the same location expanded, but adding newly added folders to the tree) how can we achieve this?


24 Sep 2011, 2:51 AM
Do you want to reload a tree node? If so, it seems that there is no reload method in the Ext.data.NodeInterface. In my option, to reload a node we must call a 're-expand' method, and this code works fine for me:

function reloadTreeNode(node, recursive, callback, scope) {
node.set('leaf', false);
node.set('expanded', false);
node.set('loaded', false);
node.expand(recursive, callback, scope);

26 Sep 2011, 2:10 AM
Hi, thanks for your reply. How exactly do you call this method?

I have a second question. We want to print out f.ex "and many more.." instead of adding every node if there is like 1000 subfolders. Anyone have an idea of how to implement this functionality?


again, thanks for replies!

26 Sep 2011, 4:21 AM
If you only want to reload a single node's children then you can use:

node: node

where node is the parent node and treeStore is the TreeStore for the tree.

If you want to reload the entire tree, maintaining which nodes are currently expanded and selected, then it gets a little complicated. In that case I think you'd have to do most of the work yourself, taking into account that some of the expanded/selected nodes may no longer exist. It wouldn't be too difficult but I don't think there's any magic shortcut on this one.

I have a second question.

I'd recommend posting unrelated questions in separate threads. This forum uses a Q&A format and it gets confusing if there are multiple questions per thread.

26 Sep 2011, 5:24 AM
Thank you! According to shirtle's solution, I change my reload method as follow:

* reload a tree node, and expand it
* @param {Ext.tree.Panel} tree
* @param {Ext.data.NodeInterface} node The node to be reload
* @param {Boolean} (Optional) recursive True to recursively expand all the children
* @param {Function} callback (Optional) The function to execute once the expand completes
* @param {Object} scope (Optional) The scope to run the callback in
function reloadNode(tree, node, recursive, callback, scope) {
node: node,
callback: function(records, operation, successful){
operation.node.expand(recursive, callback, scope);

To illustrate the usage, I take a example to show how to reload a node currently selected by a user:

var tree = Ext.getCmp('myTree'), // Ext.tree.Panel
nodes = tree.getSelectionModel().getSelection();
if (nodes.length > 0) {
reloadNode(tree, nodes[0]);