如何将 css 类添加到 Ext4 中的树节点

How do I add a css class to a tree node in Ext4?

本文关键字：Ext4 树节点 添加 css      更新时间：2023-09-26

我想突出显示Ext.tree.Panel中的一些节点。

在 Ext3 中，我通过向树节点 ui 对象添加一个类来实现这一点：

// add a class with to highlight the node
myTreeNode.getUI().addClass('highlightclass');
// remove the class to remove the highlighting
myTreeNode.getUI().removeClass('highlightclass');

Ext4 中的等效项是什么？我已经能够通过设置节点模型的 iconCls 字段来更改图标，但我真的希望能够设置一个允许我突出显示整个节点的类。

这是我找到的我自己问题的答案：

// add a css class to a specific tree node
myTreePanel.getView().addRowCls(myTreeNode,'highlightclass');
// remove a css class from a specific tree node
myTreePanel.getView().removeRowCls(myTreeNode,'highlightclass');

虽然选定的答案可能有效，但在我的 ExtJS 版本 （4.0.7） 中，只要我在树面板中展开或折叠节点，css 类就会全部重置。我相信解决这个问题的更永久的方法是

myTreeNode.set('cls', 'highlightclass');

这会将您的类添加到特定树节点的 td.x-grid-cell DOM 元素中。

希望有帮助

要实现此目的，您需要将树视为树网格。 为只有一列的树设置列定义，隐藏列的标题并向列添加呈现器。

之后，您可以使用为突出显示的行定义的 CSS 类以及行模型上的属性来定义渲染器，以告知应突出显示哪些行：

renderer: function(value, metaData){
    if (whatever you want here as a condition) {
        metaData.tdCls = "x-grid-row-alt-mine";
    }
    return value;
}
相关文章：