因为我正在使用一个主题，所以我必须把自定义的CSS文件放在标准的ExtJS CSS之前带有！important标志。

新的css文件：

  .later .x-grid-cell {
 background -color：＃FFB0C4！important; 
} 
 .now .x-grid-cell {
 background-color：＃5491BD！important; 
} 
 

I have my grid which loads a list of data, and some of the data should change the background value by a specific date value. If the date is smaller then the today's date, it should use the css class of 'now', otherwise 'later'. It does work fine, but my problem is that only one row is changing the background color, so it doesn't go through the whole list.

heres my grid:

grid = Ext.create('Ext.grid.Panel', {
                store: store,
                xtype: 'gridpanel',
                columns: [
                    { text: 'Name', dataIndex: 'name', tdCls: 'x-grid-cell' }
                ],
                stripeRows: false,
                viewConfig: {
                    getRowClass: function(record, index) {

                    var date = Ext.Date.parse(record.get('reminderDate'),"c").valueOf();
                    var today = Ext.Date.parse(Ext.Date.format(new Date(), 'Y-m-d'), "c").valueOf();

                    return today < date ? 'later' : 'now'

                }                    
            },
            renderTo: Ext.getBody()
      });

edit:

The backgroudn colors changes only on the top row in the grid, the rest stays unchanged. however, the getrowclass calls every row.

CSS:

.later .x-grid-cell {
        background-color: #FFB0C4;
    }
.now .x-grid-cell {
        background-color: #5491BD;
    }

Figured out what the Problem was.

Because I am using a theme I had to put the custom CSS File before the standard ExtJS CSS with the "!important" flag.

New css file:

.later .x-grid-cell {
        background-color: #FFB0C4 !important;
    }
.now .x-grid-cell {
        background-color: #5491BD !important;
    }