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 class：

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

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

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

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

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