Sencha touch 在Sencha Touch 2的选项卡面板内放置按钮时未触发事件

我在Sencha Touch 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'
                }
            ]
        });
    }
});

我已尝试将处理程序函数修改为：

处理程序：函数（按钮、事件）

但这也不起作用

谢谢，

---

Nitin

您需要将所有代码放入

Ext.application…

和

launch:function（）{…}…

中。你的代码运行良好。看

但是，再次强调，

buttonContainer

并没有真正添加到任何选项卡面板中。如果更改选项卡，您可以看到

按钮container

一次消失以更改选项卡。如果要将其添加到任何选项卡中，请执行以下操作-

首先- 将

全屏：false

设置为您的

按钮容器

面板

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

假设您想在

Present

选项卡中添加这些按钮。您可以使用以下方法来完成此操作--

此处，

buttonContainer

仅作为

present

选项卡内的一项添加。您可以切换选项卡，并可以看到具有正确事件处理程序的按钮。 看到这个了吗

---

如果您遵循MVC体系结构，那么编写具有多个视图和用户交互的应用程序将变得更加容易。ST完全是关于MVC的，遵循它是一个很好的实践。

这里是指向小提琴的链接：

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