How to change css of a grid cell of a row in Extjs 4.1.3

Question

I have an ExtJs grid, whose 1st row is used as temporary row. In the grid certain columns are non-editable. I want to show non-editable cells of first row(temporary) as non-editable. As that temporary row does not have any values so how to show those cells as non-editable (like greying out that cell only)

As selected in the image, I want to show those cells as greyed out

scebotari66 scebotari66 · Accepted Answer · 2017-09-08T07:10:22

Obviously this will be achieved by applying a CSS rule to those elements. To target the column we will be using the tdCls column config.

A CSS class names to apply to the table cells for this column.

To target the row, usually the getRowClass method is used, but in this this particular case I think this will be an overkill, because it will be called on every row of the grid, we just need a class for the first row. So I think the way to go is by adding the class to the first row on view's viewready event.

That being said, here is how the solution could look. Add a tdCls for the needed columns:

{
    text: 'Serial',
    dataIndex: 'serial',
    tdCls: 'serial-column',
    width: 200
}

Add a class to the first row:

viewConfig: {
    listeners: {
        viewready: function (view) {
            Ext.get(view.getNode(0)).addCls('first-row');
        }
    }
}

Then just apply the needed styling via CSS:

.first-row .serial-column {
    background: #ccc;
}

Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/26aq

P.S. This is a really good tutorial about styling ExtJS grid cells: http://skirtlesden.com/articles/styling-extjs-grid-cells

How to change css of a grid cell of a row in Extjs 4.1.3

1 Answers