By default editable grid cells are not notable, users do not know, which cell they can edit. It makes sense to mark them with dotted borders. For this purposes I have overrided the’Ext.grid.column.Columns‘ class and added ‘x-grid-cell-editable’ css class to the cell’s TD tag. As you can see from the fiddle sample the ‘Email’ and ‘HomePage’ fields are editable unlike the ‘Name’ and ‘Phone’ columns.

This override will not work if you have set the ‘tdCls‘ property (getter function) in the column config.

Override:

Ext.define('overrides.grid.column.Column', {
    override: 'Ext.grid.column.Column',

    initComponent: function() {
        if(this.editor) {
            this.tdCls = 'x-grid-cell-editable';
        }
        this.callParent();
    }
});

CSS (Must be integrated to to your theme package):

.x-grid-cell-editable {
    border: 1px dotted #ccc;
}

 

Sample Usage: