changing background colors of grid rows dynamically in extjs 4.2.2

Question

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;
    }

Answer 1

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;
    }