Sencha Touch 2：如何从不同的标签栏导航到相同的屏幕项目

Question

在HomeView上我有一个导航到readyContainer视图的按钮。在标签栏上我还有一个项目也可以进入readyContainer视图。现在在readyContainer我有按钮列表。请参阅上面的ReadyContent.js。我遇到了哪些容器需要用作推送视图的参考。如果我从家里去了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时，我使用哪个容器来推送视图，因为我不知道用户是否从主页视图或就绪选项卡栏上的按钮进入该屏幕。

Answer 1

我不知道我完全按照你的帖子，但我会尽力回答...

首先，你真的不应该使用您的组件id除非你知道100％，你将只能使用该组件一次，并且您将不会将该ID用于任何其他组件。如果要为组件使用ID，请使用itemId，它提供了一个相对路径以基于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，因为这是在点击该按钮，这将是积极的看法。