0

在 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 时，我使用哪个容器来推送视图，因为我不知道用户是从主视图上的按钮还是从就绪选项卡栏进入此屏幕。

4

1 回答 1

0

我不确定我是否完全关注你的帖子，但我会尽力回答......

首先，您不应该真正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，因为当您点击该按钮时，该视图将处于活动状态。

于 2013-08-22T12:32:51.187 回答