如何在ExtJs中清除树形结构？

Question

我已经成功创建了一个动���加载子节点的 Ext.tree.TreePanel，但是我很难清空树并加载新数据。 有人可以帮我编写代码吗？

- slmcmahon

Answer 1

来自ExtJS大师Saki的精彩博客。

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

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

- jDempster

Answer 2

在 Ext JS 4 中，如果你想重新加载树形面板的数据，你需要重新加载树形存储器。

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

其中treeId是树的ID。如果您有一个存储ID，可以直接在存储ID上使用load()。

要删除所有子节点：

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

然而，从存储库重新加载树节点并不需要删除子节点。

- Farish

Answer 3

在我的情况下，我的Ext tree有一个隐藏的根节点类型为AsyncTreeNode。如果我想要清除树并从服务器重新填充，这很简单：

tree.getRootNode().reload();

- Joel Mueller

Answer 4

您可以简单地使用node.removeAll()从此节点中删除所有子节点。

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

- zzg

Answer 5

我终于在他们的论坛中找到了答案。对于任何感兴趣的人，这里是：

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

- slmcmahon

Answer 6

我遇到了类似的问题，我的解决方案是在节点折叠时将其“标记”为未加载，因此在重新展开时强制重新加载。

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

- J Sidhu

Answer 7

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

我不熟悉Ext，但我猜测他们有DOM抽象化工具可能会让这更容易。Prototype中的等效物可能是这样的：

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

除非tree.root指的是一个集合对象而不是树的根DOM节点，但是它借用了DOM API方法名称？这似乎非常不可能，特别是对于现代JS库。

- eyelidlessness