如何将自定义渲染动态添加到 extjs 树中的树节点？答案

【问题标题】：How do I dynamically add custom rendering to a tree node in extjs tree?如何将自定义渲染动态添加到 extjs 树中的树节点？
【发布时间】：2014-11-26 17:20:31
【问题描述】：

当我选择树中的一个节点时，我想动态添加一些自定义渲染（可能是边框，可能有一些颜色变化）。

我试过了：

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

   item.renderer = function(value, record){
      return Ext.String.format('<div class="tree-font">{0}</div>', value);
   }
}

但它似乎不起作用。

我还希望渲染器是附加的（或链接的）。我已经像图标一样在节点上进行了渲染，因此新的渲染器应该与另一个渲染器相辅相成。不确定 extjs 是否可以做到这一点？

【问题讨论】：

标签： extjs extjs4

【解决方案1】：

试试这个

listeners: {
    itemclick: function(dv, record, item, index, e) {
        item.style.color="RED"; 
        //or use classList
        item.classList.add("tree-font");
    }
}

【讨论】：

【解决方案2】：

为什么不借助 css 来实现呢，当我们选择一行时，Extjs 会在 tr 中添加 'x-grid-row-selected'。

css：

.x-grid-row-selected .x-grid-cell-inner {
    background: gray !important
}

如果您的网格有选择模型作为单元模型，那么您可以使用 css 做您想做的事情：

.x-grid-cell-selected .x-grid-cell-inner {
    bacground: red !important
}

【讨论】：

这只会影响选定的行。我正在查看实际的“单元格”而不是整排树
抱歉回复晚了：你的网格的选择模型是什么单元模型？或者您只想突出显示树列单元格？？