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

【问题标题】：Button Event not getting fired when put inside Tab Panel in Sencha Touch 2在 Sencha Touch 2 的选项卡面板中放置按钮事件时未触发
【发布时间】：2013-05-16 07:18:56
【问题描述】：

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

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

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

但这也行不通。

谢谢，尼丁

【问题讨论】：

这里是小提琴的链接：new.senchafiddle.com/#/bcYJM

标签： sencha-touch tabpanel

【解决方案1】：

您需要将所有代码放入Ext.application... 和launch:function(){...}...。您的代码运行良好。见demonstration here。

但话又说回来，buttonContainer 并没有真正添加到任何选项卡面板中。如果您更改选项卡，您可以看到buttonContainer 消失了一次以更改选项卡。如果您想将其添加到任何选项卡中，请执行此操作-

首先 - 将fullscreen:false 设置为您的buttonContainer 面板。

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

假设您想在Present 选项卡中添加这些按钮。您可以通过以下方式做到这一点--

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

在这里，buttonContainer 仅作为 present 选项卡内的项目添加。您可以切换选项卡，并可以看到带有正确事件处理程序的按钮。看到这个demo here

如果您遵循 MVC 架构，那么编写具有多个视图和用户交互的应用程序会变得更加容易。 ST 是关于 MVC 的，遵循它是一种很好的做法。

【讨论】：