ExtJs 树面板如何更改节点复选框的背景图像？

Question

首先我使用的是 Sencha v4.0.0。

我有一个带有两个复选框（父级和子级）的树形面板，您可以在下面的代码片段中看到：

{
            xtype: 'treepanel',
            id: 'treepanelId',
            name: 'treepanelName',
            cls: 'myCustomCSS',
            width: 200,
            height: 49,
            rootVisible: false,
            store: {
                root: {
                    expanded: true,
                    children: [{
                        text: "Check1",
                        name: "check1",
                        id: "check1Id",
                        checked: true,
                        expanded: true,
                        children: [{
                            text: "Check2",
                            name: "check2",
                            id: "check2Id",
                            checked: false,
                            leaf: true
                        }]
                    }]
                }
            }
        }

我的学校作业应用程序有两种复选框图像，我必须能够根据是否选中复选框来更改它们。假设选中的图像有一个蓝色边框，另一个是红色边框。

这是我在树形面板的 cls 选项中使用的默认 css 类：

.myCustomCSS{
    .x-tree-checkbox {
        background-image: url(../path/checkbox-blue.png) !important;
    }
}

我的实现的问题在于它当前的方式，对于两种复选框状态（选中或未选中），仅显示带有蓝色边框的图像，因为 cls 选项正在设置背景图像对于树面板中的所有复选框。

我尝试为树面板设置 afterrender 侦听器，但我的两个树节点都没有 addClass 或 removeClass 方法，否则我可以动态更改 css 类。

我还尝试在树形面板中设置以下选项：

viewConfig: {
   getRowClass:function(record) {
      return "myCustomCSS-Red";
   }
}

但也没有成功...

有人知道如何动态更改单个节点的复选框背景图像吗？

Answer 1

如果您想使用 CSS 执行此操作，您可以使用选择器“tree-checkbox-checked”。

所以 CSS 可能看起来像这样

.x-tree-checkbox {
    background-image: url("https://findicons.com/files/icons/2711/free_icons_for_windows8_metro/256/unchecked_checkbox.png");
    background-size: cover;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color:#db7b8c;
}

.x-tree-checkbox-checked {
    background-image: url("https://findicons.com/files/icons/2711/free_icons_for_windows8_metro/256/checked_checkbox.png");
    background-size: cover;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color:#b7f29b;
}

提示：我将它们完全分开是因为我没有设法在我的小提琴中使用嵌套选择器（我习惯于 SCSS）。

我为此创建了一个小小提琴。 希望这能回答您的问题。

https://fiddle.sencha.com/#view/editor&fiddle/3cmc