how to call a function on a controller when Tapping on TabPanel? Sencha Touch 2

Question

I have a controller and a TabPanel in Sencha Touch 2, I want to call a function when an element is tapped on the TabPanel:

TabPanel.js

Ext.define('app.view.principalTabPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.ptabpanel',
    config: {
        ui: 'light',
        items: [
            {
                xtype: 'container',
                itemId: 'idContnr',
                title: 'tap Me!',
                iconCls: 'bookmarks'
            }
        ],
        tabBar: {
            docked: 'bottom',
            ui: 'light'
        }
    }
});

controller.js

Ext.define('app.controller.mainController', {
    extend: 'Ext.app.Controller',
    config: {
        control: {
            "ptabpanel #idContnr": {
                tap: 'takePhoto'
            }
        }
    },
    takePhoto: function() {
        console.log('toma foto!'); // Not Working :(
    }
});

score 2 · Answer 1 · answered May 09 '12 at 16:43

2

Instead of listening to 'tap' events on the tabs, you should listen to 'activeitemchange' on the tabpanel itself. See http://docs.sencha.com/touch/2-0/#!/api/Ext.tab.Panel-event-activeitemchange

answered May 09 '12 at 16:43

borck

928
10
19

thanks!. Then why I can do it with the generated sencha id: #ext-tab-2? – lito May 09 '12 at 19:49
I want to listen not only "change" action but also click on the same tab again. What can i do? @borck – Ismail Yavuz Jun 15 '15 at 11:45

score 1 · Answer 2 · answered May 09 '12 at 18:13

1

It works when listening/Query for the html-id generated by Sencha "ext-tab-2".

for Instance:

config: {
    control: {
        "ptabpanel #ext-tab-2": {
            tap: 'onButtonTap'
        }
    }
},

But now the problem is how to change the "ext-tab-2" name generated by Sencha Touch 2

@Borck: thanks!.

answered May 09 '12 at 18:13

lito

3,105
11
43
71

Thanks this fixed my problem also. This will help to have tap event even if one tab is selected. – amrit_neo Nov 26 '12 at 07:40

score 0 · Answer 3 · edited May 16 '12 at 21:24

0

You can assign IDs to the tab bar buttons by adding this configuration to the tab panel:

tabBar: {
  id: 'myTabBar',
  items:[
    {
      id: 'myFirstTab'
    },
    {
      id: 'mySecondTab'
    },
    ...
   ]
 }

edited May 16 '12 at 21:24

RThomas

10,702
2
48
61

answered May 16 '12 at 18:46

Adam Klein

401
3
10

myFirstTab and mySecondTab would be the IDs of the panels, not the buttons. With this, you can get the show or hide events in the controller. – prossel Apr 25 '14 at 08:34

how to call a function on a controller when Tapping on TabPanel? Sencha Touch 2

3 Answers3

Linked