ExtJS - styling grid rows

he 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 .