Event Listener for Panel in Controller

[borryshasian]

Hi guys,

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

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:

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?

[Jacky Nguyen]

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:

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

In your controller:

control: {
    'mycontainer': {
        tap: function() {
            // ...
        }
    }
}

[borryshasian]

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>?

[clubby]

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

//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');
  }
}

[wirtsi]

@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

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

[romanyu]

Thanks for pointing this out. It really works!

[Nuthan Santharam]

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