ext js 树：发生后渲染事件时如何动态加载节点？答案

【问题标题】：ext js tree: How load nodes dynamically when afterrender event occured?ext js 树：发生后渲染事件时如何动态加载节点？
【发布时间】：2013-03-25 01:03:42
【问题描述】：

主要任务是在加载树面板后使用 ajax 动态打开一个分支。用户不应进行任何点击。它应该在页面加载后自行扩展。

我尝试使用 afterrender 事件递归加载节点。但我无法在那里获得当前的树对象。这一步是空的。

这就像 expandAll 调用。此代码也不适用于 afterrender 事件：

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

那么，如何使用 ajax 加载节点？

更新 1： 上面的代码现在正在运行。我只是在“树”定义之后添加此代码。但问题仍然存在。 ajax如何加载一个节点？

【问题讨论】：

标签： javascript extjs tree extjs4

【解决方案1】：

你不能像大多数例子一样使用树存储吗？如果你这样做了，树会自动从 store 请求节点，store 会从服务器加载东西。鉴于您的服务器代码可以在给定特定节点的情况下发回分支。

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

如果您在 Chrome 中打开开发者工具，转到网络选项卡，然后在树中展开一个节点，您将看到 TreeStore 将通过从“get-nodes.php”请求数据自动加载该节点的子节点给定展开的节点的 id。

你可以通过简单地调用.expand()来扩展节点。

如果这不起作用，你可以只加载模型，当你拥有它时，将它添加到树中并像这样展开父级：

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

您的问题有点宽泛，所以我希望这对您有所帮助。

您可能想看看Ext.data.NodeInterface documentation about how to manipulate trees.

【讨论】：

您告诉我们从根类别扩展节点。而你就在这里。但是，在页面加载后，如何在没有任何用户操作的情况下动态地（通过节点 ID）打开某个分支（子/子/子/节点）？
嗯，不，不是从根节点。 findChild() 方法将遍历整个树（所有节点）以找到将成为新节点父节点的节点。新节点必须有一个 parentId，但这是给定的。因此，您将新节点添加到该父节点，然后展开父节点。这就是这段代码的作用。只需从 store 中加载一个模型，当它成功加载时（上面代码中的成功回调），parentNode 将接收新的子节点并展开。我不知道您是如何加载节点的，但通常会像从服务器 API 或通过商店那样加载它们。