在extjs 4.2.2中动态地改变网格行的背景颜色

Question

我的网格加载了一个数据列表,一些数据应该通过特定的日期值更改背景值.如果日期小于今天的日期,则应使用'now'的css类,否则使用'later'.它确实工作正常,但我的问题是只有一行正在改变背景颜色,所以它不会遍历整个列表.

继承我的网格:

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

编辑:

backgroudn颜色仅在网格的顶行更改,其余颜色保持不变.但是,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;
    }