Style rows in grid

Question

I am trying to create a grid, each row having a different style(font, color, background color, etc). The styles are in an array of strings, (each having css code), the same length as the number of rows in the grid. My problem is that I can't find a solution to set each row's style to the styles stored in my array. The grid I created looks like this:

newGrid = Ext.create('Ext.ux.Grid', {
        store: tableStore,
        columns: gridColumns,
    });

and the array looks pretty much like styles[]

Any help would be greatly appreciated!

Sergey Novikov · Accepted Answer · 2016-02-05T06:49:12.953

Here is working fiddle

var myStyles = [
        {
            backgroundColor: 'red'
        },
        {
            backgroundColor: 'green',
            fontWeight: 'bold'
        },
        {
            backgroundColor: 'blue'
        },
        {
            backgroundColor: 'yellow',
            fontStyle: 'italic'
        }
];

myStore.getData().each(function(record){
    // You can map grid store records with styles array in any other way,
    // for example purposes I just use row internalId
    var recordId = record.internalId - 1;

    for(var propertyName in myStyles[recordId ]) {
        myGridView.getRow(record).style[propertyName] = myStyles[recordId][propertyName];
    }
});

Ext.view.Table.getRow() return HTMLElement so you can manipulate with it with JS any way you want, read HTMLElement.className and HTMLElement.style for example.

Also, with abit more of addition code you can map styles array with grid records based on, for example, record certain property value.

Style rows in grid

1 Answers1