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

Mongolic

Are you saying getRowClass is not called for each row, or that the background color for each row is not changing? – Uneducated

it is called for each row. the bg color is not changing for each row – Mongolic

Then it's probably an issue with your css. – Uneducated

I added the css file. – Mongolic

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

Mongolic

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

Drastic

Please remove the password on your fiddle – Makalu

I changed the fiddle link. It should not prompt for password. Let me know if it worked. I tested it myself and it should be fine now. – Drastic