Handlers for Sencha Touch tap on panel with docked toolbar

Question

I'm working on adding Ext.Panel with the docked bottom toolbar which contains a button and has two different handlers for a tap on a panel body and a button on the toolbar. After the setup (see code below) it seems that one handler handles every tap on the panel and toolbar as well. Here is the code I have right now:

var infoButton = new Ext.Button({
  ui: 'round-small',
  border: 0,
  iconCls: 'info',
  style: "background: transparent;",
  iconMask: true,
  handler: handlerTapInfo
});

var infoToolbar = new Ext.Toolbar({
  border: 0,
  ui: config.ui || 'light',
  dock: 'bottom',
  style: 'background: transparent;',
  items: [{xtype: 'spacer'}, infoButton]
}); 

var pic1Panel = new Ext.Panel({
    id: '1',
    flex: 1,
    listeners:{
        afterrender: function(c){
            c.el.on('click', function(){
                 handlerTapOnPanel();
           });
        }
    },
    dockedItems: [infoToolbar]
 });

Answer 1

If you put all the panel's items inside a container, and add the listener on that container it will probably solve the problem.

If not, then you can stop the propagation of the event with e.stopEvent or return false (at least in Sencha Touch 2.0), but you need to verify the order in which the events are registered (the panel's should be the last I think)