在 HomeView 我有一个导航到 readyContainer 视图的按钮。在标签栏上，我有一个项目也可以进入 readyContainer 视图。现在在 readyContainer 我有按钮列表。请参考上面的 ReadyContent.js。我在必须使用哪个容器作为推送视图的参考方面遇到问题。如果我从 Home 转到 readyContainer，然后点击那里的按钮，控制器将引用 homeContainer。如果我从标签栏转到readyContainer，控制器是否应该引用readyContainer？我如何知道将哪个视图设置为参考。任何帮助将不胜感激。
refs: {
readyContainer: 'readyContainer'
}
或者
refs: {
homeContainer: 'homeContainer'
}
main.js
Ext.define('COSD.view.Main', {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar',
],
config: {
tabBarPosition: 'bottom',
layout:'card',
items: [
{
xtype:'homeContainer'
},
{
xtype:'readyContainer'
},
{
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'
}
]
}
})
主页内容.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,
}
],
}
]
}
})
ReadyViewContainer.js
Ext.define('COSD.view.ReadyViewContainer',{
extend:'Ext.NavigationView',
xtype:'readyContainer',
config:{
title:'Ready',
iconCls:'home',
scrollable:true,
styleHtmlContent:true,
styleHTMLCls:'home',
html:[].join(""),
items:[
{
xtype:'readyContent'
}
]
}
})
ReadyContent.js
Ext.define('COSD.view.ReadyContent', {
extend:'Ext.Panel',
xtype:'readyContent',
config: {
title:'Ready',
iconCls:'home',
layout:'vbox',
scrollable:true,
styleHtmlContent:true,
styleHTMLCls:'home',
html:[].join(""),
items:[
{
xtype: 'button',
id:'prepareDisaster',
style:'border-radius:0',
cls:'NavButtonListing',
pressedCls:'NavButtonListingSelected',
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>',
},
]
}
});
ReadyViewController.js
Ext.define('COSD.controller.ReadyViewController', {
extend: 'Ext.app.Controller',
config: {
control: {
'#prepareDisaster': {
tap: 'prepareDisasterTap'
}
},
refs: {
readyContainer: 'readyContainer'
}
},
prepareDisasterTap: function() {
this.getReadyContainer().push({xtype: 'preparedisasterscreenview'})
}
});
感谢您解释 id 的用法。很抱歉不清楚我遇到的问题。我很难解释这个场景。我可以选择使用 id:'readyButton' 导航到 ReadyViewContainer，在主屏幕上和底部的标签栏称为 xtype:'readyContainer'）。我只有一个版本的 ReadyViewContainer。如果用户点击 readyButton，它会导航到 ReadyViewContainer，但活动选项卡是 Home 选项卡。如果用户在标签栏上选择了“就绪”图标，它还将导航到 ReadyViewContainer，并且活动标签栏将是“就绪”。ReadyViewContainer 有一个名为 preparefordisaster 的按钮。因此，这意味着用户可以从“就绪”标签栏（活动标签为“就绪”）进入此屏幕 ) 或主屏幕上的 readyButton（活动选项卡为“主页”）。当用户选择 preparefordisaster 时，我使用哪个容器来推送视图，因为我不知道用户是从主视图上的按钮还是从就绪选项卡栏进入此屏幕。