Question

How would I go about setting the background colour of an Ext JS Grid row, mainly just the selected item(s).

Any help would be greatly appreciated.

Answer 1

To change the selected row color you have to override the appropriate CSS class:

.x-grid3-row-selected {
   background-color: red !important;
}

You could also override the default border-color if you want using that class.

The getRowClass function, on the other hand, is for adding a static CSS class to rows using business logic to determine which rows are affected. You could also achieve row coloring that way, but it would not affect highlighted row color (although you could also write CSS that used both classes together to do so).

EDIT: To change the row style programmatically you will still want to define your styles statically in CSS, then simply add/remove CSS classes dynamically as needed. E.g., assuming a grid and a button with id ‘my-btn’, clicking the button will add a class (could be defined just like .x-grid3-row-selected as shown above) to the first row in the grid, applying whatever style is in the CSS class. It’s up to you to define your real business logic for selecting row(s), but this is the syntax:

Ext.get('my-btn').on('click', function(){
    Ext.fly(myGrid.getView().getRow(0)).addClass('error');
});