how to fire event on an element

[flamant]

Hi,
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);
                        toolBar.setVisible(true);
                        var panel = Ext.getCmp('gridPanel_'+sptNbr+'_'+gridNbr);
                        panel.body.addClass('inFrontOf');
                        var newPanelHeight = panel.height+2*toolBar.height;
                        panel.setHeight(newPanelHeight);
                        });
                       scope.body.on('contextmenu', function(evt, elRef) {
                           evt.stopEvent();
                           if (!this.ctxMenu) {
                               this.ctxMenu = new Ext.menu.Menu({
                                  items: [.....],
                                  listeners: {
                                       mouseover: function(menu, evt, menuItem) {
                                             var panel = Ext.getCmp('gridPanel_'+sptNbr+'_'+gridNbr);
                                             panel.fireEvent('mouseover');
                                        }
                                }

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

[Animal]

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.

[flamant]

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

[Animal]

You are using a mouseenter listener on your Panel's Element to show the toolbar, and a mouseleave listener to hide it?

[flamant]

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)

[Animal]

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.

[flamant]

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 ?

[Animal]

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.

[flamant]

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);
                            toolBar.setVisible(false);
                            var panel = Ext.getCmp('gridPanel_'+sptNbr+'_'+gridNbr);
                            panel.body.removeClass('inFrontOf');
                            var newPanelHeight = panel.height-toolBar.height;
                            panel.setHeight(panel.defaultHeight);
                        }

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

[Animal]

evt.getRelatedTarget()

It returns a naked DOM element

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