ExtJS 4 changing Grid row background color

• Tweet

• Tweet

Hello,

ExtJS’s grid system is really powerful module that for me is backbone of their framework. In this post I am going to show you a couple of methods you can use to change background colors of some random Grid rows.

First up is to define couple of CSS classes which we will make use of later in our code.

The CSS

.red-back 
{
    background:#ffe2e2 !important;
}
.yellow-back 
{
    background:#fdffc9 !important;
}

Now that we have our CSS classes to play with and apply to our Grid rows, let me take you through a full example from creating a new simple Grid to applying styles.

The Markup

<div id="bcolorex" style="margin:50px"></div>

The Grid

var grid = null;
 
Ext.onReady(function(){
 
var datavals = {'datavals':[
        { 'data': 'data1' },
        { 'data': 'data2' },
        { 'data': 'data3' },
        { 'data': 'data4' },
        { 'data': 'data5' },
        { 'data': 'data6' },
        { 'data': 'data7' },
        { 'data': 'data8' },
        { 'data': 'data9' },
        { 'data': 'data10'}
        ]
    };
var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
            'data'
        ],
        data:datavals,
        proxy: {
            type:'memory',
            reader: {
                type:'json',
                root: 'datavals'
            }
        }
    });
 
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {
                text     : 'Demo data',
                width     : 100,
                dataIndex: 'data',
                flex:1
            }
        ],
        height: 250,
        width: 300,
        title:'',
        renderTo: 'bcolorex',
        stateful: false
    }
    });
});

We our Grid is ready and properly rendered on our page.

From here we can do few things. If we already know which rows to highlight that would be easy to do by using viewConfig property as shown below

,
        viewConfig: {
                    stripeRows:false ,
                    getRowClass: function(record, index) {                            
                        if (parseInt(index) % 2 == 0) {
                            return "red-back";
                        } else  {
                            return 'yellow-back';
                        }
        }

Probably its a good thing that you override .x-grid-cell class definition and remove background-color property from it.

In the above code I am just putting my custom classes for odd and even rows. But you can see that I have access to record object, thus I can apply conditions based on the data on hand.

This is OK but what if you grid data is changed every 10 seconds and you are not sure which row to highlight with color red for example.

I will do that sort of handling on store.load event and will do something like this

grid.store.on('load',function(cObj,recs) {
 
              Ext.each(recs,function(rec){
                    var tr = grid.getView().getNode(rec.index);
                    el = Ext.get(tr).select('td');
                    el.removeCls('red-back yellow-back');
                    if(rec.data.data == 'data2') 
                    {
                        el.addCls('red-back');                        
                    }
                    else 
                    {
                        el.addCls('yellow-back');                        
                    }
              });  
        });

We are doing a check on every store reload and changing the background color according to the new data. So just to simulate consider adding this code to test it

setTimeout(function(){grid.store.reload();},3000);

Above code will refresh our store after 3 seconds (once only). This method also give you granular control to stylize individual columns too.

Demo

http://jaspreetchahal.org/examples/extjs-grid-row-background-color.html

This is just my working solution. If you can come up with a better solution that would be nice. Please leave your comments with your solution.

I hope that this at least give you starting point to go ahead and explore more of ExtJS.

ExtJS version used in this post demo is ExtJS 4.1.1, I may update it without notice

Cheers