0

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

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

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

但这也行不通。

谢谢，尼丁

4

1 回答 1

1

您需要将所有代码放入Ext.application...和launch:function(){...}.... 您的代码运行良好。请参阅此处的演示。

但话又说回来，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选项卡内的项目添加。您可以切换选项卡，并可以看到带有正确事件处理程序的按钮。在此处查看此演示

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

于 2013-05-16T07:52:28.477 回答