如何在Ext4中的树节点上添加css类?

时间:2012-06-15 16:12:20

标签: javascript extjs extjs4

我想强调一下Ext.tree.Panel中的一些节点。

在Ext3中,我通过向树节点ui object添加一个类来完成此操作:

// 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字段来更改图标,但我真的希望能够设置一个允许我突出显示整个节点的类。

3 个答案:

答案 0 :(得分:3)

以下是我在自己的问题中找到的答案:

// 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');

答案 1 :(得分:1)

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

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

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

希望有所帮助

答案 2 :(得分:0)

要实现此目的,您需要将树视为树格。仅使用一列为树设置列定义,隐藏列的标题并向列添加渲染器。

之后,您可以使用为突出显示的行定义的css类来定义渲染器,并且可能是行模型上的属性,以指示应突出显示哪些行:

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