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

问题描述

要更改整行背景颜色，我们可以使用getRowClass，但是如何只对一个单元格和特定列....做任何想法？

  // 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： b

有一种方法可以这样做：

 函数更改b if（val> 0）{
 return'< div class =x-grid3-cell-innerstyle =background-color：＃B0FFC5;>< span style = green;>'+ val +'< / span>< / div>'; 
} else if（val< 0）{
 return'< div class =x-grid3-cell-innerstyle =background-color：＃FFB0C4;> style =color：red;>'+ val +'< / span>< / div>'; 
} 
 return val || 0; 
} 
  

，然后只是：

  ... 
 {header：'Change'，width：75，sortable：true，renderer：change，dataIndex：'change'，align：'center'} 
 ... 
  

但是这种方式会在从白色到彩色背景变化时变形。

编辑
>
在将自定义css应用到列后，如何在短时间内删除相同的值，因此在值更改时，会出现一次闪烁？类似 setTimeout（remove-css（），1000）; 或 Ext.Function.defer（remove-css，1000） / code>

任何想法？

解决方案

我建议使用 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 <0）{
 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.

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