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);
    }
},

Answer 2

Use simplest way

In your grid use -

cls: 'myRowClass'

Your css -

.myRowClass .x-grid-cell {background:#FF0000 !important; }

Answer 3

If you want to change the class after the data has loaded, you can do it like this:

myGridPanel.getView().removeRowCls(rowIndex,"old class");
myGridPanel.getView().addRowCls(rowIndex,"new class");

Here, rowIndex is the selected row, which you can get in some event functions(like "select"). By using this, you can change CSS of the row after clicking it.

Answer 4

The way to do it is to define viewConfig on the grid:

Ext.create('Ext.grid.Panel', {
    ...

    viewConfig: {
        getRowClass: function(record, index, rowParams, store) {
            return record.get('someattr') === 'somevalue') ? 'someclass' : '';
        }
    },

    ...
});

Answer 5

In your initComponent() of your Ext.grid.Panel use getRowClass() as follows:

    initComponent: function(){
        var me = this;
        me.callParent(arguments);
        me.getView().getRowClass = function(record, rowIndex, rowParams, store) {
            if (/* some check here based on the input */) {
                return 'myRowClass';
            }
        };
    }

This basically overrides the getRowClass() function of the underlying Ext.grid.View which is called at render time to apply any custom classes. Then your custom css file would contain something like:

.myRowClass .x-grid-cell {background:#FF0000; }