css - 在 extjs 4.2.2 中动态更改网格行的背景颜色

Question

我有一个加载数据列表的网格，一些数据应该按特定日期值更改背景值。如果日期小于今天的日期，则应使用“现在”的 css 类，否则使用“稍后”。它确实工作正常，但我的问题是只有一行在更改背景颜色，因此它不会遍历整个列表。

这是我的网格:

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

编辑:

背景颜色仅在网格中的顶行发生变化，其余保持不变。然而，getrowclass 调用每一行。

CSS:

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

Answer 1

找出问题所在。

因为我使用的是主题，所以我必须将自定义 CSS 文件放在带有“!important”标志的标准 ExtJS CSS 之前。

新的 CSS 文件:

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