ExtJS 4.2 Tree highlight selected row on cell editing

Question

I have a tree panel with 4 columns:

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing',{
    pluginId : 'cellEditing',
    clicksToEdit: 1
});
var tree = new Ext.tree.Panel({
    store:treestore,
    plugins : [
        cellEditing
    ],
    selModel:{
        selType:'cellmode'
    },
    defaults:{
        tdCls:'greyColumn'
    },
    columns:[
        somecolumns
    ]
});

And in my css I have the style:

.x-grid-row .greyColumn {
    background-color:#f2f2f2;
}

I´m trying to add this piece of code in the selModel definition:

listeners: {
    select: function (cellModel, record, rowIndex) {
        cellModel.view.addRowCls(rowIndex, 'style');
    },
    deselect: function (cellModel, record, rowIndex) {
        cellModel.view.removeRowCls(rowIndex, 'style');
    },
    scope: this
}

And in my css the "style" definition:

.x-grid-row.style .x-grid-cell {
    background-color: #edbcb4 !important;
}

When the tree loads, i see the columns with the background grey, but when I select one cell to edit, it turns red for a moment and returns to grey and I don't know how to fix it or avoid it. I want the row of the cell i´m editing red, not returning to grey.

Answer 1

Use edit and beforeedit event's in your celledit component form styled row

Fiddle