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

Question

First of all I'm using Sencha v4.0.0.

I have a tree panel with two checkboxes (a parent and a child) as you can see in the code snipet below:

{
            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
                        }]
                    }]
                }
            }
        }

My school assignment app has two kinds of checkbox images that I have to be able to change depending on whether a checkbox is checked or not. Let's say that the checked image has a blue border and the other a red border.

This is the default css class that I use in the cls option in the tree panel:

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

The problem with my implementation is that the way it currently is, for both checkbox states (checked or unchecked) only the image with the blue border is shown because the cls option is setting the background image for all checkboxes in the tree panel.

I've tried setting an afterrender listener to the tree panel but neither of my tree nodes have the addClass or removeClass methods that would otherwise allow me to dynamically change the css class.

I've also tried to set the following option in the tree panel:

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

But also with no success...

Does anyone know how I can change a single node's checkbox background image dynamically?

Answer 1

If you want to do this using CSS you can use the selector 'tree-checkbox-checked'.

So a CSS could look like this

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

Hint: I separated them completely because I didn't managed to use nested selectors in my fiddle (I'm used to SCSS).

I created a little fiddle for this. Hopefully this answers your question.

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