PDA

View Full Version : cell highlighting on mouse over



shraddhasalekar
25 Jun 2012, 1:27 AM
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
25 Jun 2012, 3:19 AM
use css:


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

If you want apply hover not for all grids/trees - use cls config (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-cfg-cls)


// grid config
cls: 'mygrid'

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

shraddhasalekar
27 Jun 2012, 2:22 AM
Thanks Redraid, its done!!