sencha-touch - Sencha Touch 2 でタブパネル内に配置するとボタンイベントが発生しない

Question

Sencha Touch 2 アプリケーションのタブ パネル内に 2 つのボタンを配置しました。コードを以下に示します。

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'
                }
            ]
        });
    }
});

ハンドラー関数を次のように変更しようとしました。

handler: 関数 (ボタン、イベント)

しかし、これもうまくいきません。

ありがとう、ニティン