tap event not working in view - sencha-touch-2

Question

Please check the code below, what I am doing wrong? I want to output to console when tap event on body.
Ext.define('iApp.view.LoginView', {
extend: 'Ext.Panel',
xtype: 'loginViewPanel',
config: {
style: "background-color: #3f3f3f;",
html: 'hello world',
listeners: {
el: {
tap: function() {
console.log('tapped');
}
}
}
}
});
no output to console...

Answer 1

You are using an old version of adding an element listener.
If you use the compat version fo Sencha Touch 2, it should give you a warning in the console like this:
So your code should look something like this:
Ext.define('iApp.view.LoginView', {
extend: 'Ext.Panel',
xtype: 'loginViewPanel',
config: {
style: "background-color: #3f3f3f;",
html: 'hello world',
listeners: {
tap: {
element: 'element',
fn: function() {
console.log('tapped');
}
}
}
}
});
You can find out more information about the changes on the Sencha Forums.
Update
If you want to delegate to a child of the item, you must still target element, and then within your function check if the tapped element is the one you want:
var component = Ext.Viewport.add({
width: 300,
height: 300,
style: 'background: red',
html: 'Tap me<div id="test" style="background:blue;">Only this will alert</div>',
listeners: {
tap: {
element: 'element',
fn: function(e) {
var element = Ext.get(e.target);
if (element.id == "test") {
alert('tap!');
}
}
}
}
});

Answer 2

If you want to select an element by class or id, it's cleaner to use the delegate option:
var component = Ext.Viewport.add({
width: 300,
height: 300,
style: 'background: red',
html: 'Tap me<div id="test" style="background:blue;">Only this will alert</div>',
listeners: {
tap: {
element: 'element',
delegate: '#test',
fn: function(e) {
alert('Element with id "test" was tapped!');
}
}
}
});

Answer 3

Ext.define('app.view.Card', {
config : {
layout : 'card',
items : [{
xtype : 'panel',
docked : 'top',
html : "<img width='320px' id='image1' src='images/im.jpg'/>",
listeners : {
touchstart : {
element : 'element',
fn : function() {
console.log('tapped')
}
}
}
}]
},
initialize : function() {
// if recording/handling the event in the controller.
this.relayEvents(this.element, ['tap']);
}
});

Answer 4

A simpler and cleaner way of getting Tappable Panels
Ext.define('My.component.TappablePanel', {
extend: 'Ext.Panel',
initialize: function () {
this.element.on('tap', function(){
this.tap();
}, this);
},
tap: function() {
console.log('I heard the tap!');
}
});
And it can be overridden in child classes like so...
Ext.define('My.view.TestPanel', {
extend: 'My.component.TappablePanel',
config: {
html: 'Tap this panel',
style: 'background-color: #5E99CC'
},
tap: function() {
console.log('I handled the tap');
}
});