Styling a Grid Panel Row based on column value in Extjs (Extended JavaScript)

Adding a style class to a particular row in the grid is quite easy.
You can use the viewConfig property of grid panel.
If you wish to style your rows differently based on different values of a particular record value, here is an example of how to achieve it.


    viewConfig: {
        //Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('Type');
            if (c == 'TYPE 1') {
                return 'childRow';
            } else if (c == 'TYPE 2') {
                return 'parentRow';
            }
        }
    },
   
    <style>
    .childRow{
        background-color: #C0C0C0;
    }

    .parentRow{
        background-color: white;
    }
    </style>