View Full Version : Help with dynamic row color in grid

2 Jan 2011, 10:47 AM
Hello, (and sorry in advance for my bad english)

I have a grid with data and columns generated with a JSON file.
I need to have different background color for rows. The background color of the row is known when I generate the JSON file dynamically on the server.

Can I make the background color in that JSON file (without having a column with that background value in my grid) and how can I affect the the background color on the row when the grid load the JSON file?


2 Jan 2011, 11:14 AM
For your first question, yes you can specify the background color in the JSON. It'll need to be a field in the store but need not be a column of your grid.

For your second question, it depends. Background color is usually used as a way of denoting selected rows. How would this interact with your customization?

2 Jan 2011, 12:03 PM
In my case, background color will be an indication if the data in the row has an error, is incomplete or is Ok.

2 Jan 2011, 12:10 PM
So are users still allowed to select rows and what do you want to happen if they do?

Am I right in thinking that you'd only want to use 3 different colors? It makes things a little easier if you only want to use a small number of colors.

2 Jan 2011, 12:22 PM
3 colors.
At this time nothing append on row select.

2 Jan 2011, 1:24 PM
Check out the GridView class in the API, and its getRowClass method. Should do what you want :)

2 Jan 2011, 2:40 PM
Thx all.
How i resolve it with Ext designer :

in viewConfig of your grid, add the getRowClass function

viewConfig: {
forceFit: true,
onDataChange: function(){
getRowClass: function(record, wIndex, rp, ds){
bg=record.data.bgcolor; return bg;

My generated JSON file contains the bgcolor element, but not displayed in a column

root: [
{field: 'One', bgcolor: 'vert'},
{field: 'Two', bgcolor: 'jaune'},
{field: 'Three', bgcolor: 'rouge'}
metaData: {
fields: ['field', 'bgcolor'],
idProperty: 'field',
root: 'root'
columns: [
{header: 'Field', dataIndex: 'field'},

and finally add a css file

.rouge {background-color: #FF0000 !important;}
.jaune {background-color: #FFFF00 !important;}
.vert {background-color: #82FF8A !important;}
.orange {background-color: #FF9900 !important;}