Styling two separate grid cells with different styles after rendering the table in extjs

Question

I'm having troubles giving some cells some styling in ExtJS 5. I have two style rules in the index page:

.yellow-cell .x-grid-cell{
    font-weight: bold;
    background-color: yellow;
}
.red-cell .x-grid-cell{
    color:blue;
    background-color: red;
}

On select event, the cell selected should be colored with yellow-cell rule. and the cell before it needed to be colored with the other rule red-cell, the rest of the table is just defaults.

var gridTable = Ext.getCmp('gridTable');
gridTable.on("select",function(obj, record, index, eOpts){
    gridTable.getView().addItemCls(record, 'yellow-cell');
});

and on deselect I use removeItemCls() then addItemCls() to add the red-cell styling.

Any chance there is a proper way to do this? because my code just color the whole row, and I want to color just the selected/deselected cells.

I'm really stuck here, any help will be highly appreciated.

Answer 1

gridTable.getView().getCell(rec,col).addCls('yellow-cell');

Also you could try console.log(record) to find the right div name and do the following:

Ext.get('idOfcellDiv...').addClas('yellow-cell');