在 extjs 4.2.2 中动态更改网格行的背景颜色 [英] changing background colors of grid rows dynamically in extjs 4.2.2

问题描述

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

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.

这是我的网格:

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 会调用每一行.

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

推荐答案

找出问题所在.

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

Because I am using a theme I had to put the custom CSS File before the standard ExtJS CSS with the "!important" flag.

新的 css 文件:

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

这篇关于在 extjs 4.2.2 中动态更改网格行的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！