【发布时间】：2013-08-22 01:05:48
【问题描述】：
我是 sencha 新手，标签栏有问题。我的第一个视图有 2 个按钮和下面的列表。点击任何项目列表导航到详细视图，该视图显示底部标签栏，该栏有 4 个图标，并且有一个返回按钮，可以返回到 homeContent 视图。
现在，当我点击 homeContent.js 中的 readyButton 时，我想导航到 ReadyScreenView.js。它现在正在这样做，但是我在此屏幕顶部没有后退按钮，也没有标签栏。
如何确保所有视图都有一个标签栏和一个返回上一屏幕的后退按钮。如果我选择底部栏图标，它可以正常导航并且标签栏仍然存在。仅当通过单击按钮完成导航时，我才看不到底部标签栏和后退按钮。任何帮助将不胜感激。
main.js
Ext.define('COSD.view.Main', {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar',
],
config: {
tabBarPosition: 'bottom',
layout:'card',
items: [
{
xtype:'homeContainer'
},
{
xtype:'readyscreenview'
},
{
xtype:'emergencyscreenview'
},
{
xtype:'allnews'
}
]
}
});
homeContainer.js
Ext.define('COSD.view.HomeContainer',{
extend:'Ext.NavigationView',
xtype:'homeContainer',
config:{
title:'Home',
iconCls:'home',
scrollable:true,
styleHtmlContent:true,
styleHTMLCls:'home',
html:[].join(""),
items:[
{
xtype:'newsContent'
}
]
}
})
homeContent.js
Ext.define('COSD.view.HomeContent',{
extend:'Ext.Panel',
xtype:'newsContent',
config:{
title:'San Diego County Emergency ',
iconCls:'home',
cls:'toolbar',
layout:'vbox',
items:[
{
xtype: 'button',
id:'readyButton',
style:'border-radius:0',
cls:'ReadyImageButton',
pressedCls:'ReadyImageButtonSelected',
html:'<div class="mainbutton-container-green"> <div class="mainbutton-thumb"><img src="resources/images/AppHome_ReadyIcon-Default Platform.png" /></div><div class="mainbutton-content"><i> <h3 class="mainbutton-title">ReadySanDiego</h3><p>Plan, Prepare </p></i></div></div>',
},
{
xtype: 'button',
id:'emergencyButton',
style:'border-radius:0',
cls:'EmergencyImageButton',
pressedCls:'EmergencyImageButtonSelected',
html:'<div class="mainbutton-container-red"> <div class="mainbutton-thumb"><img src="resources/images/AppHome_EmergencyIcon-Default Platform.png" /></div><div class="mainbutton-content"><i> <h3 class="mainbutton-title">Emergency</h3><p>News, Maps, Shelters </p></i></div></div>',
},
{
xtype: 'label',
cls:'NewsUpdate',
html: 'News Updates'
},
{
xtype: 'label',
cls:'LatestNews',
//autoEl:{id:'timediv'}
html: '<div id="timediv">Latest News | Refreshed: 8/2/2013 10:36:26 AM</div>'
},
{
xtype:'list',
id:'newslistContent',
loadingText: "loading...",
emptyText: '<div>No notes found.</div>',
store:'HomeStore',
itemTpl:'<div><p>{title}</p><p class="newsItemTitle">{publishedDate}</p></div>',
flex: 1,
plugins: [
{
xclass: 'Ext.plugin.PullRefresh',
pullRefreshText: 'Pull to refresh...',
},
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
}
],
}
]
}
})
ReadyButtonController.js
Ext.define('COSD.controller.ReadyButtonController', {
extend: 'Ext.app.Controller',
config: {
control: {
'#readyButton': {
// On the tap event, call onNewTap
tap: 'onNewTap'
}
},
},
launch: function() {
},
onNewTap: function() {
Ext.Viewport.animateActiveItem({xtype: 'readyscreenview'},{type: 'slide',direction: 'left'});
}
});
ReadyScreenView.js
Ext.define('COSD.view.ReadyScreenView', {
extend: 'Ext.Container',
xtype:'readyscreenview',
config: {
title:'Ready',
iconCls:'home',
layout: 'vbox',
scrollable:true,
styleHtmlContent:true,
styleHTMLCls:'home',
html:[].join(""),
items:[
{
xtype:'titlebar',
cls:'toolbarReady',
title:'Ready',
docked:'top',
ui:'plain',
style: {
color:'#FFFFFF',
fontSize:'12pt'
}
}
,
{
xtype: 'button',
id:'prepareDisaster',
style:'border-radius:0',
cls:'NavButtonListing',
pressedCls:'NavButtonListingSelected',
// html:'<div class="listbutton-container"> <div class="listbutton-thumb"><img src="resources/images/CoSD_PrepareIcon-Default Platform.png"/></img></div><div class="listbutton-content"> <h3 class="listbutton-title">Prepare for Disasters</h3></div></div>',
html:'<div class="ButtonListings-container"> <div class="ButtonListings-thumb"><img src="resources/images/CoSD_PrepareIcon-Default Platform.png" /></div><div class="ButtonListings-content"><h3 class="listbutton-title">Prepare for Disasters</h3></div></div>',
},
{
xtype: 'button',
id:'makeAPlan',
style:'border-radius:0',
cls:'NavButtonListing',
pressedCls:'NavButtonListingSelected',
html:'<div class="ButtonListings-container"> <div class="ButtonListings-thumb"><img src="resources/images/CoSD_MakeAPlanIcon-Default Platform.png" /></div><div class="ButtonListings-content"><h3 class="listbutton-title">Make a Plan</h3></div></div>',
},
{
xtype: 'button',
id:'buildAKit',
style:'border-radius:0',
cls:'NavButtonListing',
pressedCls:'NavButtonListingSelected',
html:'<div class="ButtonListings-container"> <div class="ButtonListings-thumb"><img src="resources/images/CoSD_BuildAKitIcon-Default Platform.png" /></div><div class="ButtonListings-content"><h3 class="listbutton-title">Build a Kit</h3></div></div>',
},
{
xtype: 'button',
id:'stayInformed',
style:'border-radius:0',
cls:'NavButtonListing',
pressedCls:'NavButtonListingSelected',
html:'<div class="ButtonListings-container"> <div class="ButtonListings-thumb"><img src="resources/images/CoSD_StayInformedIcon-Default Platform.png" /></div><div class="ButtonListings-content"><h3 class="listbutton-title">Stay Informed</h3></div></div>',
},
{
xtype: 'button',
id:'getInvolved',
style:'border-radius:0',
cls:'NavButtonListing',
pressedCls:'NavButtonListingSelected',
html:'<div class="ButtonListings-container"> <div class="ButtonListings-thumb"><img src="resources/images/CoSD_GetInvolvedIcon-Default Platform.png" /></div><div class="ButtonListings-content"><h3 class="listbutton-title">Get Involved</h3></div></div>',
},
{
xtype: 'button',
id:'communityReadiness',
style:'border-radius:0',
cls:'NavButtonListing',
pressedCls:'NavButtonListingSelected',
html:'<div class="ButtonListings-container"> <div class="ButtonListings-thumb"><img src="resources/images/CoSD_CommReadiness-Default Platform.png" /></div><div class="ButtonListings-content"><h3 class="listbutton-title">Community Readiness</h3></div></div>',
},
]
}
});
【问题讨论】：