css - changing background colors of grid rows dynamically in extjs 4.2.2 -

I have a grid that loads a list of data, and some data is replaced by a specific date value should change . If date is small then today's date, it should use the 'now' CSS class, otherwise 'later' It works fine, but my problem is that only one line background color is changing, so it does not go into the complete list.

Here's my grid:

  grid = Ext.create ('Ext.grid.Panel', {shop}, xtype: 'gridpanel', column: [ {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 (); today var =. 'Now'}}, renderTo: Ext.Date.parse (Ext.Date.format (new date), 'YM-P '), "C") valueOf ();' later 'date; returned to today's: ext.getBody ()}); Edit:  
 Backdrop colors change only on the top row in the grid, the rest remains unchanged. However, getrowclass calls every line.  
 CSS:  
  .later .x-grid-cell {background-color: # FFB0C4; } .now .x-grid-cell {background-color: # 5491BD; }    
 
 
 Problem detected.  
 New CSS file: Because I did "Important!" I had to put the custom CSS file before the standard ExtJS CSS with the flag.  
  .later .x -grid-cell {background-color: #FFB0C4! Important; } .now .x-grid-cell {background-color: # 5491BD! Important; }