Javascript 在移动web app中加载多个选项卡和/或其视图时出现问题
我正在使用sencha touch制作一个移动应用程序。当用户登录后,他/她看到主视图时,此应用程序会执行什么操作。在此主视图上有两个按钮。这两个按钮将用户带到各自的视图,即Javascript 在移动web app中加载多个选项卡和/或其视图时出现问题,javascript,sencha-touch,sencha-touch-2,Javascript,Sencha Touch,Sencha Touch 2,我正在使用sencha touch制作一个移动应用程序。当用户登录后,他/她看到主视图时,此应用程序会执行什么操作。在此主视图上有两个按钮。这两个按钮将用户带到各自的视图,即约会和消息。这两个视图的底部有三个选项卡按钮,即主页、约会、消息。主页按钮将用户带回由两个按钮组成的主页视图。而约会和消息按钮将他带到自己的视图 这是我的主视图 如您所见,此视图中没有选项卡。以下是此视图的代码 config: { layout: { type: 'vbox' },
约会
和消息
。这两个视图的底部有三个选项卡按钮,即主页、约会、消息。主页按钮将用户带回由两个按钮组成的主页视图。而约会
和消息
按钮将他带到自己的视图
这是我的主视图
如您所见,此视图中没有选项卡。以下是此视图的代码
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
将其带到约会视图
。然后,向他展示以下视图
下面是这个视图的代码
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Appointments',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Appointments'
},
html: ["Appointments View"].join("")
}
]
}
加载此视图后,我只能看到一个约会选项卡。我想看到这三个视图的三个选项卡如何使其他选项卡可见?
下面是我的消息视图
这是它的代码
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Messages',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Messages'
},
html: ["Messages View"].join("")
}
]
}
我无法查看此视图,也无法访问此视图,因为选项卡上没有“消息”按钮再次强调,如何为这些视图添加所有选项卡按钮,以及当我单击每个选项卡按钮时,它将带我进入其视图?以下是选项卡面板的示例:
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个项目
对于事件,我喜欢创建一个控制器,为需要侦听事件的每个项目设置引用,并为每个项目设置控件。让我知道如果你想帮助解决如何做到这一点。我将在下面提供一个简单的示例,让您开始学习:
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.. }
});