Not able to implement actions on tabs in sencha tabpanel

Question

I am trying to implement the actions on click on tabs in tabpanel using sencha. Somehow I am not able to get the alerts on clicking the tabs.

Here is my code. I have tried to use handler and listener both the approaches on different tabs but I am not able to get alert message with any of them.

Int.views.bottomTabs = new Ext.TabPanel({

        dock: 'bottom',

        tabBar: {
        id:'bottomtab',
            dock: 'bottom',
            ui: 'dark',
            layout: {
                pack: 'center'
            }
        },

            defaults: {
                scroll: 'vertical',
                xtype: 'button'
            },


        items: [
        {
            title: 'Tab1',
        iconCls: 'und',
        handler: function(){
        alert('It is clicked');             

       },
        {
            title: 'Tab2',
            iconCls: 'und',
            listeners: {activate: update},
        },
        {
            title: 'Tab3',
        iconCls: 'und',

        },
        {
        title :'Tab4',
        iconCls: 'und',

         }
        ]
    });
    var update = function() {
    alert('tab2 is clicked');
    }

Please help me on where am i doing wrong.

Thank you,

score 3 · Accepted Answer · answered May 24 '12 at 18:02

The way you want to attach a listener (if you want to do it inline) is the following:

items : [
    {
        title     : 'Hello World',
        listeners : {
            activate : function() {
                alert('hello world');
            }
        }
    }, 
    {
        //...
    }
]

The reason why your second way didnt work by calling the update function is because you declared update after you instantiated Ext.TabPanel

If you want to reference a function instead of writing it inline then you need to define your items inside initComponent() (better practice) and extend your class.

//..
onActivate    : function() {
    alert('hello world');
},
initComponent : function() { 
    this.items = [
        {
            title     : 'Hello World',
            listeners : {
                activate : this.onActivate
            }
        }, 
        {
            //...
        }
    ]
    // apply to superClass
}

You should read up on the Sencha Touch Class system. In your case this would be the Sencha Touch 1 way. Have a look at this series of tutorials: http://www.onlinesolutionsdevelopment.com/blog/mobile-development/creating-a-sencha-touch-mvc-application-from-scratch-part-1/

Not able to implement actions on tabs in sencha tabpanel

1 Answers1