Ein Blick unter die Wolkendecke
Know How 15.05.2013

ExtJS - styling grid rows

The styling for a row can depend on the data for that row which is represented in by a record in the grid's store. To achieve that goal, we can add a CSS class to the row (or better said the <tr> that represents that row) using the config option getRowClass:

Ext.create('Ext.grid.Panel', { 
    viewConfig: { 
        getRowClass: function(record) { 
            return record.get('gender') == 'm' ? 'male-row' : 'female-row'; 

The correspondig CSS classes would then look like:

.male-row .x-grid-cell { 
    background-color: red; 
.female-row .x-grid-cell { 
    background-color: green; 

You can find a JSFiddle to test  here .