【发布时间】：2013-08-21 20:58:50
【问题描述】：
在 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'
}
]
}
})
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 的按钮。因此，这意味着用户可以从 Ready 选项卡栏（活动选项卡为“Ready”）或主屏幕上的 readyButton（活动选项卡为“Home”）进入此屏幕。当用户选择 preparefordisaster 时，我使用哪个容器来推送视图，因为我不知道用户是从主视图上的按钮还是从 Ready 选项卡栏进入此屏幕。
【问题讨论】：