ExtJS grid selection highlighting colr issue

[Pravin.Pawar]

hi,

I'm changing cell colors of the ExtJS grid using css on grid column render event in ExtJS 4.1 somehow the row selection css (cls: 'custom-grid') gets override and grid row selction highlight do NOT work as expected.

grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
cls: 'custom-grid',
-------------
-------------
-------------
renderer: function (data, metadata, record, rowIndex) {
if (data.length > 10) {
metadata.style = "background-color:orange;";
}
return '<span onmouseover="this.style.cursor=\'hand\';">' + data + '</span>';
}

please let me know how can i resolve this issue.

[Pravin.Pawar]

I have applied cls: 'custom-grid' to ExtJS grid somehow when I applied custom formatting to individual cells of the grid then grid row selection CSS is NOT working. I want to highlight grid row with Dark Gray color. In that row; there might be few cells which are highlighted in different color and that needs to override with grid row selection colr on mouse hover.
DateView.jpg

[Pravin.Pawar]

I want to apply following css on mouse cursor over the row and selected row-


/* Grid cells when the mouse cursor is over the row */
.custom-grid .x-grid-row-over .x-grid-cell {
background-color: #ff6;
border-bottom-color: #999;
border-bottom-style: dashed;
border-top-color: #999;
border-top-style: dashed;
}

/* Grid cells in the selected row */
.custom-grid .x-grid-row-selected .x-grid-cell {
background-color: #ff0 !important;
border-bottom-color: #999;
border-bottom-style: solid;
border-top-color: #999;
border-top-style: solid;
}

[Pravin.Pawar]

I want to apply mouse over cell color to entire row -