ExtJS 4 -grid selected cell color - colors

Question

I try to find answer for this question but I can't. So I have simple grid with cells editting by plugin (Ext.grid.plugin.CellEditing). So in such a case I see selected cell displayed in "bluebox".
but I dont want to see such a selection, I want to change this background. Any suggestion please.
Thank you Jadhav, and I see the second problem in this grid. I want to edit only two columns:
this numbers with gray backgruond and this checkbox. The first one is working good but this checkbox not (when I check it and go to other place checked position become unchecked) and can't set the same background as I set for column with numbers. This is done by:
renderer: function(value, meta) {
meta.style = "background-color:lightgray;";
}
This method, in checkbox column give me this:
Why and how to solve this?
OK, almost ok because of your help but when I change background via css I see the following result (summary row is also, partly in background color') and still don't know why and how to correct it:

Answer 1

You can implement using css for selected cell in CellEditing.
In this Fiddle, I have created a demo using CellEditing plugin.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'demostore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Demo Data',
store: 'demostore',
cls:'my-grid',
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}],
selType: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
height: 200,
renderTo: Ext.getBody()
});
}
});
CSS
<style>
.my-grid .x-grid-cell-selected{
background-color: transparent !important;
}
</style>
One more way you also done using on cell editor component blur event. You need to do put this below code
var selectionModel = grid.getSelectionModel();
selectionModel.deselect(selectionModel.selection.record)

Answer 2

Just you have to overwrite inline css, so that you can change background color i.e..,
.x-grid-row-selected .x-grid-td {
background: #ffffff;
}