Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    17
    Vote Rating
    0
    Answers
    1
    Sondergard is on a distinguished road

      0  

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

    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:
    Code:
    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:
    Code:
    init: function() {
    this.control({
    '#infoBar': { tap: function(){alert("tap")} } }); }

  2. 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()

    Code:
    var someDiv = Ext.get("someDivId");
    
    
    someDiv.addListener('tap', function(){ alert("tap") });

  3. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    17
    Vote Rating
    0
    Answers
    1
    Sondergard is on a distinguished road

      0  

    Default

    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()

    Code:
    var someDiv = Ext.get("someDivId");
    
    
    someDiv.addListener('tap', function(){ alert("tap") });

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    12
    Vote Rating
    0
    Answers
    2
    logicseeds is on a distinguished road

      0  

    Default Controller.control, listens and scopes

    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
    Code:
    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:

    Code:
    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?')
    }
    })

  5. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    17
    Vote Rating
    0
    Answers
    1
    Sondergard is on a distinguished road

      0  

    Default

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

Thread Participants: 1