change color of rows in grid in ExtJs

Question

How to get the Backgroud or text colour of first five rows to be different from the next five rows. For example, First 5 Yellow,5 Orange,5 Yellow,5 Orange,and so on..

I added following listener for the grid

listeners: {
    viewready: function(g) {
        g.getView().getRow(1).style.color="#f30";
    }
} 

I've used this to get the contents in second line in red.But it's not working for me.

Answer 1

You can use a custom GridView getRowClass method:

var mygrid = new Ext.grid.GridPanel({
   viewConfig: {
      getRowClass: function(record, index, rowParams)
      {
         return (Math.floor(index / 5.0) % 2 == 0) ? 'rowClass1' : 'rowClass2';
      }
   }
})

Then define in your page or in your css the custom row style classes.

Answer 2

You need this http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column-cfg-renderer

example

ExtJS 4 - How to add background colors to columns of a grid?