Extjs Grid render only first row

Question

I am extjs beginner. I have a grid where I need to color each column based on some condition. I created the grid and added a renderer to each grid element.

The result works as expected but only for the first row and I need to have the color code applied to all rows. Any clue about what I am doing wrong ?

I use extjs 4.3

below code and result image.

Ext.define('Example.grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.testGrid',
height: 240,
margin: '10',
store: 'teststore',
requires: [
    'tests.contextmenu'
],
columns: [
    { xtype: 'gridcolumn', width:70,  dataIndex: 'running', text: 'Running',
    renderer: function(value, meta) {
              if (value != 0)
                    meta.tdCls = 'row-background-lightyellow';
              return value;}},
    { xtype: 'gridcolumn', width:70,  dataIndex: 'completed', text: 'Completed', 
    renderer: function(value, meta){
            if (value!=0)
                    meta.tdCls = 'row-background-lightgreen';
            return value;}},
    { xtype: 'gridcolumn', width:70,  dataIndex: 'failed', text: 'Failed', 
    renderer: function(value, meta){
            if (value!=0)
                    meta.tdCls = 'row-background-lightred';
            return value;} },
    { xtype: 'gridcolumn', width:70,  dataIndex: 'waiting', text: 'Waiting', 
    renderer: function(value, meta) {
            if (value!=0)
                    meta.tdCls = 'row-background-lightgrey';
            return value;} },
    { xtype: 'gridcolumn', dataIndex: 'jobid', text: 'Job Id' },
    { xtype: 'gridcolumn', dataIndex: 'jobname', text: 'Name', renderer: rendergrey},
    { xtype: 'gridcolumn', dataIndex: 'reason', text: 'Info', flex: 1 }
],

initComponent: function() {
        var me = this;
        me.callParent(arguments)
refresh: function() {
    var me = this;
    this.getView().refresh();
}
});
function rendergrey(value, meta) {
       if (value!=0)
            meta.tdCls += 'row-background-lightgrey';
       return value;
   };

And here the result:

It's been a while since I use Extjs. I think you need to use the viewconfig property and getRowClass function. Define a css class for each column and apply that css in your getRowClass function depending of the value — funcoding

Alexander Alexander · Accepted Answer · 2017-11-13T01:10:07

If you add a third, fourth and fifth row to your data set, you may see a pattern: the issue is caused by the alternating row's lightgray background color overwriting your custom color.

You did not add your CSS code, but I suspect you may want to add an !important behind the color to give it preference over the alt-row's background-color. E.g.

.row-background-lightyellow {
    background-color: #ffc !important;
}

Or you may want to remove the alternating color completely using the viewConfig on your grid:

viewConfig: {
    stripeRows: false
}

A third possibility is to use inline CSS, which always has preference over CSS styles:

// meta.tdCls = 'row-background-lightyellow'
meta.style = 'background-color: #ffc'

Extjs Grid render only first row

1 Answers