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 difficult time clearing the tree and loading it with new data. Can someone help me with the code to do this?

score 6 · Answer 1 · edited Dec 17 '15 at 11:58

6

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/

edited Dec 17 '15 at 11:58

George G

7,443
12
45
59

answered Mar 16 '09 at 09:58

jDempster

106
1
2

score 4 · Answer 2 · answered Jul 04 '11 at 14:51

In Ext JS 4:

if you want to reload the data of the tree panel, you need to reload the tree store:

getCmp('treeId').getStore().load();

where treeId is the id of the tree. If you have a store id, you may directly use load() on store id.

to remove all child nodes:

getCmp('treeId').getRootNode().removeAll();

However, removing child nodes is not necessary for reloading the tree nodes from its store.

score 3 · Answer 3 · answered Oct 11 '08 at 22:16

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();

answered Oct 11 '08 at 22:16

Joel Mueller

28,324
9
63
88

score 1 · Answer 4 · edited Dec 17 '15 at 11:58

1

you can simply use node.removeAll() to remove all child nodes from this node.

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.NodeInterface-method-removeAll

edited Dec 17 '15 at 11:58

George G

7,443
12
45
59

answered Jun 28 '13 at 02:10

zzg

31
2

score 1 · Answer 5 · edited Nov 01 '11 at 15:23

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);
}

edited Nov 01 '11 at 15:23

Jason Plank

2,336
5
31
40

answered Oct 11 '08 at 02:25

slmcmahon

81
1
1
5

score 0 · Answer 6 · answered Sep 11 '09 at 18:51

0

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;
},

answered Sep 11 '09 at 18:51

J Sidhu

191
2

score -1 · Answer 7 · answered Oct 11 '08 at 05:13

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.

How do you clear a tree in ExtJs?

7 Answers7