How to color EXTJS 6.2 modern grid row

Question

I'm facing an issue. I'm building an EXTJ 6.2 modern app with Sencha architect 4.1. I'm using the grid component in my panel with a server loaded store. I'd like to color rows according to the data I have.

In classic, this is doable with

viewConfig: {
  forceFit: true,  
  getRowClass: function(record, rowIndex, p, store) { 
     //some if statement here  
}

I tried this in modern but it doesn't work. Does anyone know of another way or a hack that I could do color the rows? Or at best at least change the one-color background.

I'd really like to avoid using the list component if possible.

Answer 1

In modern you can use itemConfig to configure Ext.grid.Row.

Add the code bellow to a Sencha Fiddle:

 Ext.application({
name : 'Fiddle',

launch : function() {
    var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
    { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224", color: "blue"  },
    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234", color: "green" },
    { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244", color: "yellow" },
    { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", color: "red" }
]
});

Ext.create('Ext.grid.Grid', {
title: 'Simpsons',

variableHeights: true,

store: store,

itemConfig: {
    listeners: {
        painted: function (row) {
            var record = row.getRecord();
            var color = record.get('color');

            row.setStyle('background: '+color)

            //if (color == 'red')
                //row.setStyle('background: red');
        }
    }
},

columns: [
    { 
        text: 'Name',  
        dataIndex: 'name', 
        minWidth: 200, 
        //flex: 1,
        //cellWrap: true,
        cell: {
            bodyStyle: {
                whiteSpace: 'normal'
            }
        }
    },
    { 
        text: 'Email', 
        dataIndex: 'email', 
        flex: 2, 
        minWidth: 250 

    },
    { 
        text: 'Phone', 
        dataIndex: 'phone', 
        flex: 1,  
        minWidth: 120
    },
    {
        text: 'Color',
        dataIndex: 'color',
        flex: 1
    }
],

//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});

the itemConfig part is what will do the trick.

After @Gwynge's comment i've created another example setting the color to each cell using the renderer config:

Ext.application({
name : 'Fiddle',

launch : function() {
    var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
    { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224", color: "blue"  },
    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234", color: "green" },
    { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244", color: "yellow" },
    { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", color: "red" }
]
});

Ext.create('Ext.grid.Grid', {
title: 'Simpsons',

variableHeights: true,

store: store,

columns: [
    { 
        text: 'Name',  
        dataIndex: 'name', 
        minWidth: 200, 
        //flex: 1,
        //cellWrap: true,
        cell: {
            bodyStyle: {
                whiteSpace: 'normal'
            }
        },
        renderer: function(value, record, dataIndex, cell) {
           cell.setStyle('background: '+record.get('color')+';')     
           return value;
        }
    },
    { 
        text: 'Email', 
        dataIndex: 'email', 
        flex: 2, 
        minWidth: 250,
        renderer: function(value, record, dataIndex, cell) {
           cell.setStyle('background: '+record.get('color')+';')     
           return value;
        }
    },
    { 
        text: 'Phone', 
        dataIndex: 'phone', 
        flex: 1,  
        minWidth: 120,
        renderer: function(value, record, dataIndex, cell) {
           cell.setStyle('background: '+record.get('color')+';')     
           return value;
        }
    },
    {
        text: 'Color',
        dataIndex: 'color',
        flex: 1,
        renderer: function(value, record, dataIndex, cell) {
           cell.setStyle('background: '+record.get('color')+';')     
           return value;
        }
    }
],

//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});

I hope this will help.

Answer 2

To color a row, the following code couldn't work in my project

itemConfig: {
    listeners: {
        painted: function(row) {
            var record = row.getRecord();
        }
    }
}

row.getRecord doesn't work (getRecord() is not recognized as function)

I succeed to color a row from a cell

columns: [{
    text: 'Name',
    dataIndex: 'name',
    width: 150,
    sortable: true,
    renderer: function(v, record, dataIndex, cell) {
        var row = cell.up();
        row.setStyle('background: ' + record.get('color') + ';');
        return v;
    }
}]

Answer 3

I found that neither of the solutions suggested in the accepted answer worked well for me. The solution using a painted event handler only works on first load. If the data is updated then the styling doesn't change so the rows are still coloured as per the original data. The renderer solution is unwieldy if you have a large number of columns or want to have multiple renderers.

For anyone else in the same boat, here's my solution:

itemConfig: {
    viewModel: true,
    bind: {
        cls: '{record.IsEnabled === false ? "disabled" : ""}'
    }
}