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

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

Solution 2

Kind of late, but for the record, in ExtJs 6.6.0, in case you want to preserve the hovering and selection background colors see this sencha fiddle: https://fiddle.sencha.com/#view/editor&fiddle/32ov.

Here is the code:

Ext.application({
        name: 'Fiddle',

        launch: function () {
            Ext.create('Ext.data.Store', {
                storeId: 'simpsonsStore',
                fields: ['name', 'email', 'phone'],
                data: [{
                    name: 'Lisa',
                    email: '[email protected]',
                    phone: '555-111-1224'
                }, {
                    name: 'Bart',
                    email: '[email protected]',
                    phone: '555-222-1234'
                }, {
                    name: 'Homer',
                    email: '[email protected]',
                    phone: '555-222-1244'
                }, {
                    name: 'Marge',
                    email: '[email protected]',
                    phone: '555-222-1254'
                }]
            });

            Ext.create('Ext.grid.Panel', {
                title: 'Simpsons',
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columns: [{
                    text: 'Name',
                    dataIndex: 'name'
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    text: 'Phone',
                    dataIndex: 'phone'
                }],
                height: 200,
                width: 400,
                renderTo: Ext.getBody(),
                viewConfig: {
                    getRowClass: function (record, rowIndex, rowParams, store) {
                        // console.log(record);
                        // if (this.isSelected(record))
                        //     return '';
                        return (record.get('name') == 'Lisa') ? 'redBackground' : '';
                    }
                },

                // features: [{
                //     ftype: 'rowbody',
                //     getAdditionalData: function (data, idx, record, orig) {
                //         // Use the data/record to determine which class to apply, then
                //         // style the row body in CSS.
                //         // console.log(data);
                //         // console.log(record);
                //         console.log(orig);
                //         // if (data.name == 'Lisa')
                //         //     return {
                //         //         rowBodyCls: "redBackground"
                //         //     };
                //         return orig;
                //     }
                // }]
            });
        }
    });

Style:

.x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-over) .redBackground .x-grid-cell {
    background-color: #ffe6e6;
}