动态改变树中的节点渲染答案

【问题标题】：dynamically changing node renderering in tree动态改变树中的节点渲染
【发布时间】：2014-12-01 10:19:52
【问题描述】：

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

比方说，当我点击一个节点时，我想突出显示它的所有子节点：

简单。

我知道如何渲染 clicked 节点。这很简单：

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

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

Item 只是一个 HTMLElement，可以改变它的样式。

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

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

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

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

我还查看了执行“向上”查询并在树形面板上调用 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(..)这样的方法

【问题讨论】：

标签： extjs extjs4.2

【解决方案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();

【讨论】：

【解决方案2】：

如果您正在寻找获取子节点，下面的代码可能会对您有所帮助

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

上面的（上面代码中的this指的是你的树面板）会给你直接的子节点。希望这对你有帮助。也看看这个来自 sencha 论坛的link。

【讨论】：