在HomeView上，我有一个导航到readyContainer视图的按钮。在tabbar上我有一个项目也可以转到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'
}
]
}
})
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,
}
],
}
]
}
})
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时，我使用哪个容器来推送视图，因为我不知道用户是否从主视图或就绪选项卡栏上的按钮进入此屏幕。
答案 0 :(得分：0)
我不确定我是否完全关注你的帖子，但我会尽力回答......
首先，您不应该在组件上使用id，除非您100％知道您将只使用该组件一次，并且您不会将该ID用于任何其他组件。如果要对组件使用ID，请使用itemId，它提供 relative 路径以获取基于ID的组件。
{
xtype: 'button',
itemId: 'emergencyButton',
style:'border-radius:0',
//...etc...
},
使用这些知识，您可以将其与您在控制器中使用多个refs的事实相结合，并且您也可以使用更长的选择器（例如emerButton: 'homeContainer #emergencyButton'）。
Ext.define('COSD.controller.ReadyViewController', {
extend: 'Ext.app.Controller',
config: {
control: {
'readyContent #prepareDisaster': {
tap: 'doPrepareDisaster'
},
'homeContent #emergencyButton': {
tap: 'doEmergencyButton'
},
},
refs: {
readyContainer: 'readyContainer',
homeContainer: 'homeContainer'
}
},
doPrepareDisaster: function() {
this.getReadyContainer().push({ xtype: 'preparedisasterscreenview' });
},
doEmergencyButton: function() {
this.getHomeContainer().push({ xtype: 'emergency-screen-view' });
}
});
因此，在推送视图时，您应该将它们推送到正确的NavigationView，因为当您点按该按钮时，该视图将处于活动状态。