1. #1
    Sencha User borryshasian's Avatar
    Join Date
    Feb 2012
    Location
    Singapore
    Posts
    29
    Vote Rating
    1
    borryshasian is on a distinguished road

      1  

    Question Event Listener for Panel in Controller

    Event Listener for Panel in Controller


    Hi guys,

    I've been trying to listen for a tap event on a panel, it works if I use this:

    Code:
    Ext.define('MyApp.view.MyContainerOfPanel', {
    extend: 'Ext.Container', xtype: 'mycontainer',
    ... {
    xtype: 'panel', id: 'panelToTap',
    listeners: {
    tap: {
    fn: function() {
    console.log("Tapped on this panel");
    }, element: 'element'
    },
    }, html: 'Tap on me please...',
    },
    Then I tried to move the tap listener to my controller file:

    Code:
    Ext.define('MyApp.controller.MyContainerOfPanel', {
    extend: 'Ext.app.Controller',
    ... control: {
    'mycontainer #panelToTap': {
    tap: {
    fn: function() {
    console.log("try panel tap on Flight Summary");
    },
    element: 'element'
    },
    },
    }
    It didn't work

    Any thought?

  2. #2
    Sencha - Sencha Touch Dev Team Jacky Nguyen's Avatar
    Join Date
    Jul 2009
    Location
    Palo Alto, California
    Posts
    469
    Vote Rating
    14
    Jacky Nguyen has a spectacular aura about Jacky Nguyen has a spectacular aura about

      1  

    Default


    Controller doesn't support element event delegation at the moment. A typical solution is relaying the element events to become component events. For example:

    In your custom view:

    Code:
    Ext.define('My.custom.Container', {
        extend: 'Ext.Container',
        xtype: 'mycontainer',
        config: {
            // ...
        },
        initialize: function() {
            this.relayEvents(this.element, ['tap']);
        }
    });
    In your controller:

    Code:
    control: {
        'mycontainer': {
            tap: function() {
                // ...
            }
        }
    }
    Sencha Touch Lead Architect

  3. #3
    Sencha User borryshasian's Avatar
    Join Date
    Feb 2012
    Location
    Singapore
    Posts
    29
    Vote Rating
    1
    borryshasian is on a distinguished road

      0  

    Default


    If I have a html in the panel, and I have several <img> with certain id, how to detect the tap event on the <img>?

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    40
    Vote Rating
    2
    clubby is on a distinguished road

      1  

    Default


    You can call getTarget() to determine if the image was tapped.

    Code:
    //in view
    initialize: function() {
      this.relayEvents(this.element, ['tap']);
    }
    
    //in controller
    control: {
      myPanel: {
        tap: 'onMyPanelTap'
      }
    }
    
    onMyPanelTap: function(a) {
      image = a.getTarget("#imageId");
      if (image) {
         alert('you clicked on your image');
      }
    }

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2009
    Posts
    25
    Vote Rating
    0
    wirtsi is on a distinguished road

      0  

    Default


    @Jacky Nguyen: Thanks for pointing this out ...

    The examples given on the docs site did not work for me at all until I added the
    Code:
    this.relayEvents(this.element, ['tap']);
    line to the view.

    What I quite understand, when would it actually work at all without this line?

    In the controllers refs I define a ComponentQuery to get a handle on a certain component (Panel or what not). So I'm always working on a component.

    The tap events will always occur on some sort of element (eg. an image inside a panel) though, not the panel itself.

    So by default, clicks/taps would never arrive at the controller, wouldn't they?

    Perhaps the docs at http://docs.sencha.com/touch/2-0/#!/...app.Controller should be updated.

    All the best

    wirtsi

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    17
    Vote Rating
    0
    romanyu is on a distinguished road

      0  

    Default


    Thanks for pointing this out. It really works!

  7. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    13
    Vote Rating
    0
    Nuthan Santharam is on a distinguished road

      0  

    Default Listen to a event within a controller for a Panel

    Listen to a event within a controller for a Panel


    Thanks for the information. Saved my time....

  8. #8
    Touch Premium Member Philip Murphy's Avatar
    Join Date
    Oct 2011
    Location
    Dublin, Ireland
    Posts
    27
    Vote Rating
    1
    Philip Murphy is on a distinguished road

      0  

    Default Is event Controller delegation not supported in ST 2.3.1?

    Is event Controller delegation not supported in ST 2.3.1?


    Great post.

    Is event delegation in the Controller config/ref/control section not supported in ST 2.3.1?

    I am running into the same problem with the detail of a view being loaded from an XTemplate. The relayEvents coupled with the e.getTarget strategy works for me, but appears a bit on the cumbersome side. I thought that I might be able to get this to work by breaking my template into smaller parts (i.e. into clickable areas each wrapped in a panel component), however, the events don't appear to be propagated to the controller. I thought that I might have to reference the inner panel in the relayEvents method to get this to work, however this didn't fix the issue.

    Code:
    Ext.define('MyQ.view.Queue', {
    ...
    config: {
        ...
            items: [{
                itemId: 'testing',
                html: 'testing'
            }],
        ...
        },
        initialize: function(me, eOpts) {
            this.relayEvents(this.items.get(0).element, ['tap']);
        }
    });
    
    Ext.define('MyQ.controller.Queue', {
        extend: 'Ext.app.Controller',
    
        config: {
            control: {
                '#testing' : {
                    tap: 'onTestTap'
                }
            }
        },
    ...