Sencha Touch Tab Handlers

Question

I am trying to make a Tabpanel in Sencha Touch and add a handler to one of the buttons, but the event does not fire when I click on it. Any ideas?

Here is the code:

Handler:

var handler = function(button, event) {
        var txt = "YES!";
        alert(txt);
    };

And the item:

 

items: [{
        xtype: 'button',
        title: 'Test',
        html: 'Test',
        iconCls: 'info',
        cls: 'card1',
        handler: handler
    }]

Answer 1

Add after items:

listeners: {
        cardswitch : function() {
          console.log('cardswitch!');
        }
}

See docs http://dev.sencha.com/deploy/touch/docs/?class=Ext.TabBar

Answer 2

In your specific case, if you want your event to fire only in the case of one tab, you can listen to the event activateon this tab:

items: [{
        xtype: 'button',
        title: 'Test',
        html: 'Test',
        iconCls: 'info',
        cls: 'card1',
        listeners: {
            activate : function() {alert("bam!")}
        }
    }]