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.

Dichroscope

You can also have a look at this question: #7471723 – Immethodical

Answer 1

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' : '';
        }
    },

    ...
});

Dichroscope

See the documentation as well: docs.sencha.com/extjs/4.2.2/#!/api/… – Salinometer

I want to do same thing but like on change of the drop down. Like if I select something from drop down corresponding to that condition the grid row class get changed and the grid data should remains same. Just need to change the row class based on combo box selection. – Longsighted

Answer 2

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

Radiation

This is certainly the recommended way to do things and allows as per the example, the ability to conditionally apply a class based on the values of the record, which is a common use for the getRowClass overrride. – Quatrain

Also, I found out it's nice to define getRowClass in the viewConfig config of the grid without the imperative approach of using initComponent :) – Dichroscope

This is not the recommended way, please use viewConfig, see the first answer. – Salinometer

Answer 3

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

Vociferous

Answer 4

Use simplest way

In your grid use -

cls: 'myRowClass'

Your css -

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

Broadcasting

This is absolutely not what was asked. – Dichroscope

Answer 5

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.

Displode