如何根据值更改更改 extjs 网格单单元格背景颜色? [英] How to change extjs grid single cell background color depending on value changes?

问题描述

要更改整行背景颜色，我们可以使用 getRowClass，但是如何仅对一个单元格和特定列执行相同的逻辑......有任何想法吗?

To change whole row background color we can use getRowClass, but how to do the same logic only for one cell, and particular column....any ideas?

//EXTJS
viewConfig: {
    getRowClass: function(record, index) {
        var c = record.get('change');
        if (c < 0) {
            return 'price-fall';
        } else if (c > 0) {
            return 'price-rise';
        }
    }
}

//CSS
.price-fall { 
        background-color: #FFB0C4;
}
.price-rise {
        background-color: #B0FFC5;
}

有一种方法可以做到这一点:

There is a way of doing this with:

 function change(val){
    if(val > 0){
        return '<div class="x-grid3-cell-inner" style="background-color:#B0FFC5;"><span style="color:green;">' + val + '</span></div>';
    }else if(val < 0){
        return '<div class="x-grid3-cell-inner" style="background-color:#FFB0C4;"><span style="color:red;">' + val + '</span></div>';
    }
    return val || 0;
}

然后就是:

...
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change', align: 'center'}
...

但是这样网格在从白色到彩色背景变化时会变形...... ???

but this way grid gets deformed on changes from white to colored background... ???

还有其他想法吗?

编辑
自定义css应用于该列后，如何在短时间内删除相同的内容，从而在值发生变化时出现闪烁一次?类似于 setTimeout("remove-css()",1000); 或 Ext.Function.defer(remove-css, 1000);
有什么想法吗?

EDIT
After custom css is applyed to the column, how to remove the same in a short period of time, so it appears to blink once when the value has changed? Something like setTimeout("remove-css()",1000); or with Ext.Function.defer(remove-css, 1000);
Any ideas?

推荐答案

我建议使用 getRowClass 并将额外的 cls 应用到所需的列:

I suggest using getRowClass with applying extra cls to needed columns:

Ext.create('Ext.grid.Panel', {
    columns: [
        // ...
        { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' },
        // ...
    ],

    viewConfig: {
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },
    // ...
});

CSS:

.price-fall .x-change-cell {
    background-color: #FFB0C4;
    color:red;
}
.price-rise .x-change-cell {
    background-color: #B0FFC5;
    color:green;
}

这是演示.

这篇关于如何根据值更改更改 extjs 网格单单元格背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！