且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何根据值的变化更改extjs网格单元格背景颜色?

更新时间:2023-01-25 21:48:55

我建议使用 getRowClass 对所需的列应用额外的cls:

  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 return'price-fall';
} else if(c> 0){
return'价格上涨';
}
}
},
// ...
});



CSS:



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

这里是演示。


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

EDIT:

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

and then just:

...
{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... ???

any other ideas?

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?

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

Here is demo.