In ExtJS, how to add a custom CSS class to data grid rows?

Question

How do I add custom CSS classes to rows in a data grid (Ext.grid.Panel)?

I\'m using ExtJS 4.0.

Answer 1

You could do something like this:

Ext.fly(myGrid.getView().getRow(0)).addClass('myClass');

Of course you could substitute the getRow() call for another cell, or you could loop through all of your rows and add it appropriately.

And then you could style that in addition to the default CSS, by doing:

.x-grid3-row-selected .myClass {
   background-color: blue !important;
}

There is also a private method of GridView called addRowClass. You can use this to add a class to your rows as well by doing:

grid.getView().addRowClass(rowId, 'myClass');

// private - use getRowClass to apply custom row classes
addRowClass : function(rowId, cls) {
    var row = this.getRow(rowId);
    if (row) {
        this.fly(row).addClass(cls);
    }
},