View Full Version : mouseover event is fired on previous row after moving to different row.

27 Jul 2009, 4:12 AM

I have a row in gridPanel having a custom CSS('myCustom-row-highlight'). I am implementing a feature of highlighting a row(with the default 'x-grid3-row-over' CSS) for 0.5 seconds on mouseover feature.

When I move the mouse over the row(say Row1), it gets correctly highlighted with 'x-grid3-row-over'. But when I move the mouse to another row(Row2), one more 'mouseover' event is generated for the earlier row(Row1). Because of this behaviour my Row1 again gets highlighted.

Is this a bug or am I missing anything here ?
My code:

gridPanel.on({ 'mouseover': function(e, t) {
var row;
if((row = gridPanel.getView().findRowIndex(t)) !== false){
var view = gridPanel.getView();
var needsHighlight = true; // variable to indicate if needs highlight
needsHighlight = false;

var el = Ext.get(view.getRow(row));
if(el.hasClass('myCustom-row-highlight') && needsHighlight){
el.highlight("efefef", {
duration: 0.5,
callback: function(el){el.addClass('myCustom-grid-row-highlight'); } // in callback adding my custom CSS back
view.highlightedRowIndex = row;
} else {
// default ExtAll.js code
gridPanel.getView().addRowClass(row, "x-grid3-row-over");
scope: this

'mouseout': function(e, t) {
var row;
var view = gridPanel.getView();
if((row = view.findRowIndex(t)) !== false && !e.within(view.getRow(row), true)){
view.removeRowClass(row, "x-grid3-row-over");
view.highlightedRowIndex = undefined;

scope: this

// removing the default listeners

'mouseover', view.onRowOver, view);
view.mainBody.removeListener('mouseout', view.onRowOut, view);