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&小提琴/3cmc