Clickable panel in sencha touch 2

Question

I'm working on sencha touch 2. I have a panel and few images. I want an action to fire on the tap of the panel. The images are placed on top of the panel. These images are used just for styling purpose. When I tap on the panel i can fire the action using :

{
   xtype : 'panel',
   listeners:{
     painted:function(ele){
           ele.element.on('tap',function(){
               console.log('you clicked panel');
         });
   }
  }
},

But as there are images on top of this panel, I have to tap where there is no image to fire this action.

 {
                     xtype : 'img',
                     src : 'resources/images/landingImages/a1.png',
                     id : 'a1Image',
                     mode : 'element',
                     width:220,
                     height:240,
                     top:0,
                     left:60

                },

Is there any way to make this event fire even when the image is overlapped on the panel. As the same image is spread on 2 different panels i cannot call the function again on image tap. Any help is appreciated.

Answer 1

if i understood your problem correctly

you can add tap even handlers for the image, and inside that

you can call event.preventDefault();

What this will do ?

Cancels the event if it is cancelable, without stopping further propagation of the event.

Means your panel can handle this event.

There is a way to do it different way too using event delegates, please go through the link below

@ Event delegation in sencha

Thanks