Button Event not getting fired when put inside Tab Panel in Sencha Touch 2

Question

I have put two buttons inside a tab Panel in Sencha Touch 2 application. The code is given below:

var btnAttendance = Ext.create('Ext.Button', {
    text: 'Take Attendance',
    padding: 10,
    width: 200,
    handler: function () {
        alert('a');
    }
});

var btnAddUser = Ext.create('Ext.Button', {
    text: 'Add User',
    padding: 10,
    width: 200,
    handler: function () {
        alert('a');
    }
});

var buttonContainer = Ext.create('Ext.Panel', {
    fullscreen: true,
    title: 'Home',
    defaults: {
        margin: 5
    },
    layout: {
        type: 'vbox',
        align: 'center'
    },
    padding: 10,
    items: [
        btnAttendance,
        btnAddUser
    ]
});

Ext.application({
    requires: [
        'Ext.tab.Panel'
    ],
    launch: function () {
        Ext.Viewport.add({
            xtype: 'tabpanel',
            items: [
                buttonContainer,
                {
                    title: 'Present',
                    items: {
                        html: '2',
                        centered: true
                    },
                    cls: 'present'
                },
                {
                    title: 'Absent',
                    items: {
                        html: '3',
                        centered: true
                    },
                    cls: 'absent'
                }
            ]
        });
    }
});

I have tried modifying the handler function as:

handler: function (button, event)

But this also doesn't work.

Thanks, Nitin

Answer 1

You need to put all your code inside Ext.application... and launch:function(){...}.... Your code is working fine. See demonstration here.

But then again, buttonContainer is not really being added to any tab panel. If you change the tab, you can see buttonContainer is gone once to change the tabs. If you want to add it inside any tab do this-

First - Set fullscreen:false to you buttonContainer panel.

var buttonContainer = Ext.create('Ext.Panel', {
            fullscreen: false,
       ....... //rest of the code.

And suppose you want to add those buttons in Present tab. You can do this with following--

    Ext.Viewport.add({
        xtype: 'tabpanel',
        items: [
            {
                title: 'Present',
                cls: 'present',
                items: [
                    {
                        html: '2',
                        centered: true
                    },

                        buttonContainer

                ]
            },
            {
                title: 'Absent',
                items: {
                    html: '3',
                    centered: true
                },
                cls: 'absent'
            }
        ]
    });

Here, buttonContainer is added as an item inside present tab only. You can switch the tabs and can see buttons there with correct event handler. See this demo here

If you follow MVC architecture, your job becomes much easier writing application having multiple views and user interactions. ST is all about MVC and it's good practice to follow it.