How do you clear a tree in ExtJs?

Question

I have managed to create an Ext.tree.TreePanel that loads child nodes dynamically, but I'm having a very difficult time clearing the tree and loading it with new data. Can someone help me with the code to do this?

Answer 1

I finally found an answer in their forums. For anyone interested it is here:

if (tree) { var delNode; while (delNode = tree.root.childNodes[0]) tree.root.removeChild(delNode); }

Answer 2

if (tree) { var delNode; while (delNode = tree.root.childNodes[0]) tree.root.removeChild(delNode); }

I don't know Ext, but I'm guessing that they have DOM abstraction that might make that easier. An equivalent in Prototype would be something like:

tree.root.immediateDescendants().invoke('remove'); // or
tree.root.select('> *').invoke('remove');

Unless tree.root refers to a collection object rather than the tree's root DOM node, but is borrowing DOM API method names? That seems really unlikely, especially for a modern JS library.

Answer 3

In my case, my Ext tree has a hidden root node of type AsyncTreeNode. If I want to clear the tree and repopulate from the server, it's pretty simple:

tree.getRootNode().reload();

Answer 4

From the wonderful blog of Saki an ExtJS guru.

while(node.firstChild) {
  node.removeChild(node.firstChild);
}

http://blog.extjs.eu/know-how/how-to-remove-all-children-of-a-tree-node/

Answer 5

I ran into a similar problem and the solution i came up with was to 'tag' the node has having not loaded when it was collapsed thus forcing a reload when it was re-expanded.

listeners: {
   collapsenode: function(node){
   node.loaded = false;
},