PDA

View Full Version : How To: One mouseover/mouseout event for entire grid



JacobGu
4 Aug 2009, 9:41 AM
I am trying to attach one mouseover and mouseout event each for an entire grid panel, but the only think I am able to accomplish one event per cell. How do I do this?

Thanks

elishnevsky
4 Aug 2009, 9:54 AM
You need to attach these events to the html element of the grid. Example can be found in the docs for getEl() member of Component class. Here (http://extjs.com/deploy/dev/docs/?class=Ext.Component&member=getEl).

JacobGu
4 Aug 2009, 10:10 AM
getEl() doesn't do it for me. I have the following code in my gridpanel definition:




listeners: {
render: function(){
this.getEl().on('mouseout', function() {alert('out');});
this.getEl().on('mouseover', function() {alert('in');});
}
}


and the alerts pop up on every cell in the grid. I want the event to bubble only once for the entire grid.

elishnevsky
4 Aug 2009, 10:49 AM
hmmm... you're right. Ok, I give up :)

Animal
4 Aug 2009, 11:31 AM
This is exactly what the mouseenter and mouseleave events are for.

Hi Eugene... This is another case of DOM events from the underlying Element! It's very common.

elishnevsky
4 Aug 2009, 11:37 AM
This is exactly what the mouseenter and mouseleave events are for.

Hi Eugene... This is another case of DOM events from the underlying Element! It's very common.

Yeah, I realize it now. And what's interesting, is that GridPanel, for example, does expose some mouse events directly, except mouseenter and mouseleave.

Animal
4 Aug 2009, 11:41 AM
Yes. WHat I always tell people who are confused by DOM events versus Observable events, is that some Components offer "enhanced" versions of basic DOM events (like click, dblclick etc) where they can "add value".

For instance the GridPanel "adds value" to the click event by identifying the row/column you clicked in. The DataView likewise offers a value added click event.

The Panel class does not export it because it has nothing extra to add over and above a basic DOM event.

elishnevsky
4 Aug 2009, 12:00 PM
Check this out, GridPanel exposes some DOM events without adding any value, like mousedown, mouseout, mouseover and mouseup. I wonder why.

Animal
4 Aug 2009, 1:04 PM
Yes it does, it is strange.

It's cellclick that is the value added click event.

I think it is just an inconsistency in the design. I would go so far as to say these events should be removed from GridPanel because they break the paradigm of Component not exporting raw DOM events from their Element.