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":"[email protected]",  "phone":"555-111-1224", color: "blue"  },
    { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234", color: "green" },
    { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244", color: "yellow" },
    { 'name': 'Marge', "email":"[email protected]", "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":"[email protected]",  "phone":"555-111-1224", color: "blue"  },
    { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234", color: "green" },
    { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244", color: "yellow" },
    { 'name': 'Marge', "email":"[email protected]", "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.