How to Highlight a node in a tree when user checks it and During unchecking that node, it should be unhighlighted in extJs >

Question

When a User Checks a node it should get Highlighted - font changes or becomes Bold. When that node is being unchecked, the Node should get un-highlighted and all the new visual effects should be removed.

Answer 1

Use the viewConfig of the tree.

Tree config:

viewConfig: {
    getRowClass: function(record, rowIndex, rowParams, store){
        return record.get("checked") ? "row-highlighted" : "row-nothighlighted";
    }
}

CSS:

.row-highlighted, .row-highlighted .x-grid-cell {
    background-color:#ffc8c8;
}

If you use a Treegrid, you can use the renderer property of treecolumn: http://docs.sencha.com/extjs/6.0.2/classic/Ext.tree.Column.html