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