Crane event control on a component over another component

Question

I have a panel with a tap listener (red square), and above it is a button (green). Something like that:

When the button is pressed, I want to avoid the red squares listener, but I cannot find a way to do this. could you help me?

This example is not really my code (im using a controller, dataitems, etc.), but 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 distributing the event in the function that controls the tap event on the green panel:

 tap: function(btn, e) { alert('green tapped'); e.stopPropagation(); }, 

Hope this helps

Answer 2

First, you can specify your green id square:

 ....... height: 50, width: 50, id: 'green' ....... 

Then inside the listeners your red square, which is your parent, you can check the target your tap event to see if it is a green square or not:

 listeners: { tap: function(e, node) { if(node.parentNode.id !== 'green') { console.log('red tapped'); } }, element: 'element' } 

Note that I am using parentNode so that in this case I will correctly follow the Sencha Touch HTML structure. You can use the item validation tool to better understand it.

Updated demo: http://jsfiddle.net/6ah6U/1/