Mouseover simple doubt

[moraes]

This is perhaps a very ordinary question, but I have spent so many time on this that I need to ask for a tip. This is the example:

http://www.tipos.org/temp/lm/

Basically, I want a toolbar that appears in the corner of a div when the div is mouse'd over. Then it disappears when the mouse goes away from the div.

I was almost there... added mouseover and mouseout to the div, and mouseover/mouseout to the toolbar. The problem is that elements inside the toolbar makes it flick, because they are not exactly the div that wraps it. Was this clear?

So in the example above I removed the event that makes the toolbar disappear when the mouse is not over it or the main div; because the flickering was unacceptable.

Any tip/code piece/url with example, please?

[jack.slocum]

I usually use the within function of the EventObject for this. Here's an example, assuming div is the Ext.Element object for the div:


div.on('mouseout', function(e){
if(!e.within(div, true)){
otherEl.hide();
}
});

The second parameter true tells it to check the related target of the event, instead of the target.

You may also want to hook the hide event of the menu to hide the edit button as well, if the event didn't occur over the div. Maybe something like:


if(!div.getRegion().contains(e.getPoint())){
otherEl.hide();
}

[moraes]

Thanks. It worked. Or more or less: if I move the mouse out of the toolbar slowly to the side, not passing by the div, the toolbar stays there. If I move the mouse out of the toolbar normally (not slowly), the toolbar is hidden. No problem; this is acceptable.

PS: I didn't knew about the methods 'within' and 'contains'. Thanks!

This was the code I used:


this.div.on('mouseover', function(e) {
// calculate and set position
// [...]
this.toolbar.show();
}, this, true);

this.div.on('mouseout', function(e) {
if(!e.within(this.toolbar, true)) {
this.toolbar.hide();
}
}, this, true);

this.toolbar.on('mouseout', function(e) {
if(!this.div.getRegion().contains(e.getPoint())){
this.toolbar.hide();
}
}, this, true);

Thanks a lot.

:"> (I'm ashamed to be in the premium forum with such a simple question)

[jack.slocum]

Glad it worked. FYI, true as the last param to override scope is no longer required. This is the default behavior if scope is passed.

This thread has the details on various ways to do events now:
http://extjs.com/forum/showthread.php?t=2047

I'm ashamed to be in the premium forum with such a simple question

Dont' be! Be proud to be one of the first Ext supporters. :) Good luck!

[moraes]

This thread has the details on various ways to do events now:
http://extjs.com/forum/showthread.php?t=2047
*Very* helpful. I updated my code and started to use some of the new shortcuts. I've not been following the forum for a while and need to upgrade myself now to use the new Ext stuff. :D