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.