I can only fire tap-event with fireAction('tap'), not mouseclick

[Sondergard]

I have a panel with some items, a tab bar, a carousel and a panel.

In my controller i add a tap-event listener. When clicking the panel nothing happens, but if i use the fireAction('tap') on the panel, the event is fired as expected.


PanelView:

Ext.define('Sencha.view.Main', {
extend: 'Ext.Panel',
config:{
items[
{    
 ...
},

{    
 ...
},

{    
xtype: 'panel',
id: 'infoBar',
data: {month: "June 2011"},
tpl: [
"<div>",
"<div><span>{month}</span></div>",
"</div>"
].join(""),
docked: 'bottom'
}
]
}
});

controller:

init: function() {
this.control({
                '#infoBar': {
                    tap: function(){alert("tap")}
                }
      });
}

[Sondergard]

Okay i've solved it myself.

Using this.control() is not possible in this situation, since it makes use of ComponentQuery.

The trick is the use Ext.get()

var someDiv = Ext.get("someDivId");


someDiv.addListener('tap', function(){ alert("tap") });

[logicseeds]

Yes, this.control in the Ext.application.Controller utilizes ComponentQuery. What you are trying to achieved is to make DOM listeners and the query function doesnt lookup/map/cache DOM elements but instead the objects created in the Sencha abstraction layer (each containing an 'element' dom reference).

DOM has 'onclick' (mouseclick as u call it in title) Sencha Touch operates with 'tap' (which is a click via Safari/Chrome browsers btw)

In this case youve constructed the Ext.Panel with id #someId and therefore the tap-listener receives clicks for the full panel (not a div inside but infact the panel.element.dom.onclick)

What you could do is following

Ext.create("Ext.Panel", { 
    items : [
       { id: 'bottomToolbar', xtype:'toolbar', docked : 'bottom', items: [
               {xtype : 'button', text:'tapme1'},
               {xtype : 'button', text:'tapme2'}
       ] }
        .....
    ]
})
...
this.control( {
  'panel > toolbar#bottomToolbar > button' { 
      tap : function () {
          console.log('no way to tell if im tap1 or tap2?')
      } 
  }
  ...
} )

This would infact capture all tap events on each of the buttons as children of the toolbar which have the ID "bottomToolbar".

If you have setup a more complicated Controller where construction of the panel/button chain is not done within your listining controller - you will have to route events from your button-taps (in the 'view') to your application and from the abstract/super Controller listen for events on your application - not via this.control but by doing similar to this:

Ext.create("Ext.Panel", { 
    items : [
       { id: 'bottomToolbar', xtype:'toolbar', docked : 'bottom', items: [
               {xtype : 'button', text:'tapme1', handler: function() { AppRef.fireEvent("buttonTap", this); }},
               {xtype : 'button', text:'tapme2', handler: function() { AppRef.fireEvent("buttonTap", this); }}
       ] }
        .....
    ]
})

....

// from within a superclass inherited controller that does not instantiate the above panel itself
this.application.on({
buttonTap : function(buttonComponent) {
          console.log('no way to tell if im tap1 or tap2?')
}
})

[Sondergard]

Thank you for a fantastic answer, i'd give you 5 stars if i knew how….