Change grid color in ExtJs

Question

How to get the color of a backgroud or text from the first five lines, which will be different from the next five lines. For example, the first 5 yellow, 5 orange, 5 yellow, 5 orange, etc.

I added the following listener for the grid

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

I used this to get the contents in the second line in red.But this does not work for me.

Answer 1

You can use your own 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 a class of custom string classes on your page or in your CSS.

Answer 2

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

Example

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