CODEWITHSUNDEEP
javascriptextjsdatagridextjs4
Erik Kaplun
Erik Kaplun

Reputation: 38257

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

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

I'm using ExtJS 4.0.

Upvotes: 8

Views: 38070

Answers (5)

Erik Kaplun
Erik Kaplun

Reputation: 38257

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

    ...
});

Upvotes: 22

Reed Grey
Reed Grey

Reputation: 508

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.

Upvotes: 1

Kanchan
Kanchan

Reputation: 1619

Use simplest way

In your grid use -

cls: 'myRowClass'

Your css -

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

Upvotes: 1

LittleTreeX
LittleTreeX

Reputation: 1239

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

Upvotes: 8

dmackerman
dmackerman

Reputation: 2966

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

Upvotes: 3

Related Questions