Question

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

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

handler：function（button，event）

但这也不起作用。

谢谢，尼丁

Answer 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的，遵循它是很好的做法。

按钮事件放入Sencha Touch 2中的Tab面板时不会被触发

1 个答案: