ExtJS ListView - Set background color for specific row

Question

I have a ExtJS ListView as below:

var myList = new Ext.list.ListView({
    id:'mylist-view',
    store: mystore,
    multiSelect: true,
    emptyText: 'No content to display',
    reserveScrollOffset: true,
    columns: [{
    header: 'Header-1',
    width: .3,
    dataIndex: 'data-1'
    },{
    header: 'Header-2',
    width: .3,
    dataIndex: 'data-2',
    align: 'right'
    },{
    header: 'Header-3',
    width: .3,
    dataIndex: 'data-3',
    align: 'right'
    }],
    });

I want to set a different background color for a specific row. How can I do it?

I referred some other solutions provided for the similar issue and tried the following:

viewConfig: {
    getRowClass: function(record, index, rowParams, ds) {
    return record.get('data-1') == 'Total' ? 'background-color: #EEEEEE' : '';
    }
}

But, that doesn't help.

Answer 1

getRowClass function should return name of css class, not css style definition.

So you should have in your viewConfig something like this:

viewConfig: {
    getRowClass: function(record, index, rowParams, ds) {
    return record.get('data-1') == 'Total' ? 'myRowClass' : '';
    }
}

And in your CSS file:

.myRowClass .x-grid-cell {
     background-color: #EEEEEE
}

Fiddle with example: https://fiddle.sencha.com/#fiddle/3p8

Answer 2

Try this..

viewConfig: {
    getRowClass: function (record) {
        if (record && record.get('data-1') == 'Total') return 'data-available-row';
    }
}

CSS

.data-available-row > td {
    background-color: #f7e5e5 !important;
}

Here is the Fiddle:

Changing row color based on the row value

Remarks: Listview just a Ext.grid.Panel

I am adding my data store code below for you reference:

    var mystore = new Ext.data.JsonStore({ 
        fields: [ 'data-1', {name:'data-2', type: 'integer'},
    {name:'data-3', type:'float'}], 
        data: [ {"data-1":"Data-1","data-2":83,"data-3":3.2},
    {"data-1":"Total","data-2":73,"data-3":4.0} ] 
    });