8

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

I'm using ExtJS 4.0.

Erik Kaplun
  • 37,128
  • 15
  • 99
  • 111
  • You can also have a look at this question: http://stackoverflow.com/questions/7471223/extjs-4-cell-renderer-problem/7476057#7476057 – Varun Achar Oct 04 '11 at 05:46

5 Answers5

22

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

    ...
});
Erik Kaplun
  • 37,128
  • 15
  • 99
  • 111
  • See the documentation as well: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.view.Table-method-getRowClass – Berend de Boer Jan 22 '14 at 04:24
  • 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. – Maninder Jan 04 '21 at 11:12
8

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; }
LittleTreeX
  • 1,259
  • 2
  • 12
  • 28
  • 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. – dougajmcdonald Oct 03 '11 at 17:31
  • 4
    Also, I found out it's nice to define `getRowClass` in the `viewConfig` config of the grid without the imperative approach of using `initComponent` :) – Erik Kaplun Oct 03 '11 at 20:03
  • This is not the recommended way, please use viewConfig, see the first answer. – Berend de Boer Jan 22 '14 at 04:25
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);
    }
},
dmackerman
  • 2,938
  • 5
  • 26
  • 43
1

Use simplest way

In your grid use -

cls: 'myRowClass'

Your css -

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

Kanchan
  • 1,609
  • 3
  • 22
  • 37
1

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.

Reed Grey
  • 508
  • 6
  • 10