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

Answer 2

最近有种，但为了便于记录，在ExtJs 6.6.0中，如果要保留悬停和选择背景色，请参见以下技巧：https://fiddle.sencha.com/#view/editor&fiddle/2p5c。

代码如下：

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

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

2 个答案: