动态更改树中的节点渲染

Question

当我在 Ext.tree.Panel 中调用itemClick()时，我想呈现一些任意节点。

让我们说，当我点击一个节点时，我想要突出显示所有孩子的黄色：

simples。

我知道如何呈现点击的节点。这很简单：

itemclick: function(dv, record, item, index, e) {

    //HTMLElement
    item.style.color="RED";

项目只是 HTMLElement ，可以更改其样式。

我还设法弄清楚我也可以像这样从商店访问数据：

itemclick: function(dv, record, item, index, e) {

    //View --> store
    dv.store.data.items[4]

数据项只是 Ext.data.Model 对象我认为。我看不到任何钩子，我可以在项目对象中添加样式:(

我还看了一下'up'查询并在树面板上调用 findChild（..）：

itemclick: function(dv, record, item, index, e) {


    //Ext.data.NodeInterface
    var panel = dv.up('panel');
    var rn = panel.getRootNode();

    var r = rn.findChild("name", "MYNODE");

    r.data.cls = 'my_class';

有一个cls'hook'，我可以设置类值。然而，渲染似乎没有发生。同样，findChild方法只返回一个值，并且没有findChildren（这真的很令人困惑。为什么ExtJS会省略这样的东西？）

这个事件回调方法真让我感到困惑。我不知何故需要HTMLElement与数据项或商店之间的链接。所有这些方法似乎都为我带来了死路。

更新： 在第三个例子中，我可以调用panel.getView（）。refresh（）;这将更新UI。所以现在唯一的问题是找到像getChildren（..）

这样的方法

Answer 1

首先获取我的面板然后再获取根节点，我解决了我的问题。然后在我的根节点上，我调用了 eachChild（）函数。

我需要传递一个递归函数。这个递归函数查找我感兴趣的节点（使用searchTerm），然后它可以设置 cls 值。最后我运行 panel.getView（）。refresh（），，这一切都很有效。

itemclick: function (dv, record, item, index, e) {



    var panel = dv.up('panel');
    var rn = panel.getRootNode();

    var traverseTree = function (c) {

        if (c.data.name == traverseTree.searchTerm) {
            c.data.cls = 'myClass';
        }else {
            c.data.cls = '';
        }

        if (c.childNodes.length > 0) {

            for (var i = 0; i < c.childNodes.length; i++) {

                var node = c.childNodes[i];

                traverseTree(node)
            }
        }
    };

    traverseTree.searchTerm = "StringToMatch";
    rn.eachChild(traverseTree, rn);
    panel.getView().refresh();

Answer 2

如果您正在寻找获取子节点可能是以下代码可能会帮助您

   var nodeRef = this.items.items[0]   //this will give you the first root node.
   var node = nodeRef.node;
   var childrenNodes = node.childNodes;

上面的代码（上面代码中的 this 指的是你的treepanel）将为你提供直接的子节点。 希望这对你有帮助。也可以从sencha论坛看一下这个link。