Highlight a set of Rows in GridPanel Ext.net (ExtJS)

Question

Required to highlight set of rows in a Ext.net gridPannel color which required to highlight

Current approach is to call the below function on rendering the GridPannel:

 function (value, meta, record, rowIndex,columnIndex,store) 
    {

                    color= record.data["ColorValue"];
                    var style = document.createElement('style');
                    style.type = 'text/css';
                    style.innerHTML = '.cssClass'+rowIndex+' {   background color:'+color+'}';
                    document.getElementsByTagName('head')[0].appendChild(style);
                    grid.store.getAt(rowIndex).set("mySelected", "cssClass"+rowIndex);
    }

But with this approach: it highlights all the rows with the same color .. a test alert(color); fetched the correct different color of each color from the GridPannel

Any Good approach for this ?

Answer 1

You can override getRowClass method in GridView.

new Ext.grid.GridPanel({
    [...],
    viewConfig: {
        getRowClass: function(record, index, rowParams, store) { return 'some-class'; }
    }
});

Or if you need apply colors post-render, you can try setting for each row:

grid.getView().getRow(0).className += 'some-class';

Note: this examples are based on ExtJS 3.4 API, but i bet there is something similiar in 4.0.