cell highlighting on mouse over

[shraddhasalekar]

Hi,
Though there is plenty of material already present on this topic, I am not successful to achieve this yet.
I am using EXTJS 4 and trying to achieve some highlight on cells when mouse hovers on it.

My code -

listeners:{
itemmouseenter:'cellMouseOverHandler',
itemmouseleave:'cellMouseOffHandler'
},

cellMouseOverHandler: function(t, record, item, index, e, eOpts) {
var el = Ext.get(e.getTarget());
el.dom.style.border = 'solid 1px blue';
},
cellMouseOffHandler: function(t, record, item, index, e, eOpts) {
var el = Ext.get(e.getTarget());
el.dom.style.border = '';
},

I want to put border color to cells. With above code, borders are created, but not always. Border Behavior is uncertain.

I am able to capture mouse over and mouse leave events correctly with above events. But I am not able to change html styles of cells in that.

Please suggest.

Thanks!

[redraid]

use css:

.x-grid-cell:hover {
    border: 1px solid blue;
}

If you want apply hover not for all grids/trees - use cls config

// grid config
cls: 'mygrid'

// css
.mygrid .x-grid-cell:hover {
    border: 1px solid blue;
}

[shraddhasalekar]

Thanks Redraid, its done!!