Manage tap event on an component over another component - sencha-touch-2

Question

I have a panel with a tap listener (red square) and, over it, a button (green). Something like this:
When the button is pressed I want to avoid the tap listener of the red square, but I cant find the way to do this. Could you help me?
This example is not exactly my code (im using controller, dataitems, etc) but is the same problem: http://jsfiddle.net/6ah6U/
Ext.Viewport.add({
xtype: 'panel',
height: 300,
width: 300,
style: 'background: #ff0000',
items: [{
xtype: 'panel',
height: 50,
width: 50,
style: 'background: #00ff00',
listeners: {
tap: function() {
console.log('green tapped');
},
element: 'element'
},
}],
listeners: {
tap: function() {
console.log('red tapped');
},
element: 'element'
},
});
Thanks!

Answer 1

Just stop the propagation of the event in the function handling the tap event on the green panel:
tap: function(btn, e) {
alert('green tapped');
e.stopPropagation();
},
Hope this helps

Answer 2

Firstly, you can give your green square an id:
.......
height: 50,
width: 50,
id: 'green'
.......
Then inside listeners of your red square which is your parent element, you can check the target of your tap event to see whether it's green square or not:
listeners: {
tap: function(e, node) {
if(node.parentNode.id !== 'green') {
console.log('red tapped');
}
},
element: 'element'
}
Notice that I'm using parentNode to follow properly HTML structure of Sencha Touch in this case. You can use inspect element tool to have better understanding about it.
Updated demo: http://jsfiddle.net/6ah6U/1/