1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    303
    Vote Rating
    0
    flamant is on a distinguished road

      0  

    Default how to fire event on an element

    how to fire event on an element


    Hi,
    I have a panel for which I implement a mouseover event and a contextMenu event on the body :

    Code:
    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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Jul 2010
    Posts
    303
    Vote Rating
    0
    flamant is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  5. #5
    Sencha User
    Join Date
    Jul 2010
    Posts
    303
    Vote Rating
    0
    flamant is on a distinguished road

      0  

    Default


    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)

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    Jul 2010
    Posts
    303
    Vote Rating
    0
    flamant is on a distinguished road

      0  

    Default


    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 ?

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  9. #9
    Sencha User
    Join Date
    Jul 2010
    Posts
    303
    Vote Rating
    0
    flamant is on a distinguished road

      0  

    Default


    I tried this :
    Code:
    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

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    evt.getRelatedTarget()

    It returns a naked DOM element

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

Similar Threads

  1. Replies: 3
    Last Post: 28 Aug 2010, 12:37 AM
  2. Fire event on element
    By TrickOfTheMind in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 28 Apr 2008, 7:23 AM
  3. [fix/bug] ComboBox select event should fire change event also
    By andrei.neculau in forum Community Discussion
    Replies: 1
    Last Post: 22 Sep 2007, 2:57 PM

Thread Participants: 1