ExtJs Tree Panel 如何更改节点复选框的背景图像？

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;
}

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

我为此做了一点 fiddle。希望这能回答您的问题。

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

ExtJs Tree Panel 如何更改节点复选框的背景图像？

ExtJs Tree Panel how do I change a node's checkbox's background image?

javascript

css

extjs