View Full Version : how to fire event on an element

16 Oct 2010, 1:52 AM
I have a panel for which I implement a mouseover event and a contextMenu event on the body :

var gridPanel = new Ext.Panel( {
id: 'gridPanel_'+sptNbr+'_'+gridNbr,
x: powerBuilderXUnitsToPixels(xMinContainerGrid),
y: powerBuilderYUnitsToPixels(yMinContainerGrid),
width: powerBuilderXUnitsToPixels(xMaxContainerGrid-xMinContainerGrid+90),
height: powerBuilderYUnitsToPixels(height-40),
defaultHeight: powerBuilderYUnitsToPixels(height-40),
//html: 'Positioned at x:50, y:50',
autoScroll: true,
border: true,
bodyBorder: true,
maxRowNbr: 0,
selectedPanel: null,
cls: 'rowGridPanel',
listeners: {
afterrender : function(scope) {
scope.body.on('mouseover', function() {
var toolBar = Ext.getCmp('toolBar_'+sptNbr+'_'+gridNbr);
var panel = Ext.getCmp('gridPanel_'+sptNbr+'_'+gridNbr);
var newPanelHeight = panel.height+2*toolBar.height;
scope.body.on('contextmenu', function(evt, elRef) {
if (!this.ctxMenu) {
this.ctxMenu = new Ext.menu.Menu({
items: [.....],
listeners: {
mouseover: function(menu, evt, menuItem) {
var panel = Ext.getCmp('gridPanel_'+sptNbr+'_'+gridNbr);

When I hover on the contextMenu (the code in blue) , I would like to fire the mouseover event put on the body of the panel

Unfortunately the body of the panel is an Ext.Element that hasn't a fireEvent method. I tried to fire the event directly on the panel without success.

Thank you in advance for your answers

16 Oct 2010, 2:05 AM
This is possible and I have posted an override for Ext.Element which adds a fireEvent method.

But what are you trying to achieve? It might be better to rethink what you are trying to achieve and approach it differently.

16 Oct 2010, 4:21 AM
Hi animal and thank you for your answer

What I try to achieve : I have a panel and when I hover it, I increase its size and a toolbar appear. I try to put a context Menu on the body of that panel but when I hover the context Menu I don't hover any more my panel so that the toolbar disappear and the size decrease. I would like that when I hover my context Menu, I still hover my panel. Dou you have an idea how I can achieve it ?

Anyway if you have no idea I am interested in the post where you override an Ext.Element which adds a fireEvent method. Can you give me the link to it ?

Thank you in advance

16 Oct 2010, 4:54 AM
You are using a mouseenter listener on your Panel's Element to show the toolbar, and a mouseleave listener to hide it?

16 Oct 2010, 6:22 AM
not exactly, I use a mouseover listener and a mouseout listener on my Panel's element for respectively (show the toolbar and increase the size) and (hide the toolbar and decrease the size)

16 Oct 2010, 6:26 AM
That won't work because mouseout bubbles, so any element within your Panel will fire that event when mouseouted, and that will bubble up and fire on the Panel's Element.

This is what the mouseenter and mouseleave events are for.

Change that first.

Then, in the mouseleave method (which you are using to hide the toolbar), you must add a check to see whether the related target (the target the mouse is moving into) is the ContextMenu. If it is, then do not hide the toolbar.

16 Oct 2010, 7:34 AM
Hi animal and thank you for your answer

I would never have guessed the thing about mouseover and mouseout

I apologies but I don't see how I can check that the target the mouse is moving into is the contextMenu. Can you give me a clue

furthermore what are the arguments for the events as mouseenter and mouseleave (as well as mouseout and mouseover). I suppose that these are javascript and not EXTJS events ? Sometimes there are EXTJS mouseout event for example on some components but the javascript mouseout event may have different arguments. Where can I find this on the web ?

16 Oct 2010, 7:41 AM
They are native DOM events on IE, and synthesized on other platforms.

But what you receive will be DOM event. It will in fact be a mouseout on non-IE platforms.

The relatedTarget is, IIRC, the element being moved into. So if the relatedTarget is, or is a descendant of the ContextMenu's Element, then do not do the toolbar hide.

16 Oct 2010, 8:52 AM
I tried this :

scope.body.on('mouseleave', function(evt) {
var relTarg = evt.relatedTarget || evt.toElement;
var menuEl = Ext.getCmp('toolBar_'+sptNbr+'_'+gridNbr).getEl();
if (!menuEl.contains(relTarg) && menuEl != relTarg) {
var toolBar = Ext.getCmp('toolBar_'+sptNbr+'_'+gridNbr);
var panel = Ext.getCmp('gridPanel_'+sptNbr+'_'+gridNbr);
var newPanelHeight = panel.height-toolBar.height;

But without success. Firebug tells me that "relTarg" is undefined

17 Oct 2010, 12:21 AM

It returns a naked DOM element

If that is === to the ContextMenu or is a descendant thereof, abort the hide operation.

17 Oct 2010, 12:23 AM
I have real concerns about your use of IDs and concatenations of IDs. It indicatess to me that you are having difficulty "orientating" the code with what it is supposed to be operating upon.

I almost NEVER use ids to access contextual DOM elements. The code knows which DOM is is operating upon through its class members.

I think you will run into trouble eventually. It will become just too complex and brittle if you continue like that.

17 Oct 2010, 2:21 AM
Now it works fine. Thank you very much

By the way does "evt.getRelatedTarget()" work for all the browsers ?

17 Oct 2010, 2:28 AM
Yes. evt is an Ext.EventObject which wraps the nasty browser issues.