javascript - 在移动网络应用程序中加载多个选项卡和/或其 View 时遇到问题

Question

我正在使用 sencha touch 制作移动应用程序。当用户登录然后他/她看到主视图时，这个应用程序会做什么。在这个 home view 上有两个按钮。这两个按钮将用户带到各自的 View ，即 Appointments 和 Messages。这两个 View 在底部有三个选项卡按钮，即 Home、Appointments、Messages。主页按钮将用户带回到由两个按钮组成的主页 View 。而 Appointments 和 Messages 按钮将他带到他们自己的 View 。

这是我的主页 View

如您所见，此 View 中没有选项卡。以下是此 View 的代码

config: {
    layout: {
        type: 'vbox'
    },
    items: [
        {
            xtype: 'titlebar',
            title: 'Home',
            docked: 'top'
        },
        {
            xtype: 'button',
            cls: 'messagesBtn',
            itemId: 'msg'
        },
        {
            xtype: 'button',
            cls: 'appointmentsBtn',
            itemId: 'appoint'
        }
    ],

    listeners: [
        {
            delegate: '#appoint',
            event: 'tap',
            fn: 'launchAppointmentView'
        }
    ]
},
launchAppointmentView: function () {
    this.fireEvent('launchAppointments');
}

一旦用户点击让他说 Button 2，这将他带到 Appointments View。然后向他显示以下 View

和下面这个 View 的代码

config: {
    tabBarPosition: 'bottom',

    items: [
        {
            title: 'Appointments',
            iconCls: 'home',

            styleHtmlContent: true,
            scrollable: true,

            items: {
                docked: 'top',
                xtype: 'titlebar',
                title: 'Appointments'
            },

            html: ["Appointments View"].join("")
        }
    ]
}

加载此 View 后，我只能看到一个约会选项卡。我想看到这三个 View 的三个选项卡。 如何让其他标签可见？

以下是我的消息 View

这是它的代码

config: {
    tabBarPosition: 'bottom',

    items: [
        {
            title: 'Messages',
            iconCls: 'home',

            styleHtmlContent: true,
            scrollable: true,

            items: {
                docked: 'top',
                xtype: 'titlebar',
                title: 'Messages'
            },

            html: ["Messages View"].join("")
        }
    ]
}

我看不到这个 View ，也根本无法进入这个 View ，因为选项卡上没有消息按钮。 同样，我如何为这些 View 添加所有选项卡按钮，以及当我单击每个选项卡时如何将我带到它的 View ？

Answer 1

这是一个标签面板的例子:

Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ]
});

问题是，您还没有将其他项目添加到您的项目列表中 - 它们必须添加到选项卡、主页和联系人中。每个屏幕需要 3 个选项卡，因此每个文件将有 3 个项目。

对于事件，我喜欢创建一个 Controller ，为您需要监听事件的每个项目提供引用，并为每个项目设置控件。让我知道您是否需要帮助了解如何做到这一点。我将在下面包含一个简单的示例来帮助您入门:

Ext.define('Analytics.controller.events.InstType', {
    extend: 'Ext.app.Controller',   

    config: { 
        refs: {
            instType: {
            selector: '#instType'
        }
    }
},

init: function() {
    // Start listening for toggle events on the 3 segmented button panels   
    this.control({   
        'instType': { 'toggle': function(container, button, pressed) {
                this.onGraphType(container, button, pressed);
            }
        }
    }); 
},

// note: these functions are called on both the buttons selected and the one that became unselected
// the 'pressed' param inidicates whether this is the selected button or not.
onGraphType: function (container, button, pressed) {
    if (pressed) { ..do stuff.. }
});