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

编辑：

背景颜色仅在网格的顶行发生变化，其余保持不变。但是，getrow 类会调用每一行。

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

Answer 2

有点晚了，但为了记录，在 ExtJs 6.6.0 中，如果你想保留悬停和选择背景颜色，请参阅这个 sencha fiddle： https://fiddle.sencha.com/#view/editor&fiddle/32ov.

代码如下：

Ext.application({
        name: 'Fiddle',

        launch: function () {
            Ext.create('Ext.data.Store', {
                storeId: 'simpsonsStore',
                fields: ['name', 'email', 'phone'],
                data: [{
                    name: 'Lisa',
                    email: 'lisa@simpsons.com',
                    phone: '555-111-1224'
                }, {
                    name: 'Bart',
                    email: 'bart@simpsons.com',
                    phone: '555-222-1234'
                }, {
                    name: 'Homer',
                    email: 'homer@simpsons.com',
                    phone: '555-222-1244'
                }, {
                    name: 'Marge',
                    email: 'marge@simpsons.com',
                    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;
                //     }
                // }]
            });
        }
    });

风格：

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