Sencha Touch 2: как перейти на тот же экран из другого элемента панели вкладок

В HomeView у меня есть кнопка, которая переходит к представлению readyContainer. И на вкладке у меня есть элемент, который также переходит в представление readyContainer. Теперь на readyContainer у меня есть список кнопок. См. ReadyContent.js выше. У меня возникают проблемы с тем, какой контейнер я должен использовать в качестве ссылки для push-представлений. Если я зайду в readyContainer из дома и нажму там кнопки, контроллер будет ссылаться на homeContainer. Если я перешел к readyContainer из панели вкладок, должен ли контроллер ссылаться на readyContainer? Как узнать, какой вид будет установлен в качестве эталонного. Любая помощь будет высоко ценится.

refs: {
        readyContainer: 'readyContainer'
    }

or

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'})


}
});

Спасибо за объяснение использования идентификаторов. Извините, что не ясно выразился о проблеме, с которой я столкнулся. У меня проблемы с объяснением сценария. У меня есть возможность перейти к ReadyViewContainer, используя id: 'readyButton', на главном экране и из панели вкладок внизу, которая называется xtype: 'readyContainer'). У меня есть только одна версия этого ReadyViewContainer. Если пользователь нажимает кнопку readyButton, он переходит к ReadyViewContainer, но активной вкладкой является вкладка «Главная». Если пользователь выбрал значок «Готово» на панели вкладок, он также перейдет к ReadyViewContainer, а активная панель вкладок будет «Готово». В ReadyViewContainer есть кнопка, которая называется preparefordisaster. Таким образом, это означает, что пользователь мог попасть на этот экран либо с панели вкладок «Готово» (активная вкладка «Готово»), либо с кнопки готовности на главном экране (активная вкладка — «Главная»). Когда пользователь выбирает preparefordisaster, какой контейнер я использую для отправки представления, потому что я не знаю, попал ли пользователь на этот экран с помощью кнопки на домашнем представлении или на панели вкладок "Готово".


person user2701143    schedule 21.08.2013    source источник


Ответы (1)


Я не уверен, что полностью понимаю ваш пост, но я постараюсь ответить...

Во-первых, вы не должны использовать id для своих компонентов, если вы не уверены на 100%, что вы будете использовать этот компонент только один раз, и вы не будете использовать этот идентификатор только для любого другого компонента. Если вы хотите использовать идентификатор для компонента, используйте itemId, который предоставляет относительный путь для получения компонента на основе идентификатора.

{
    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, так как это представление будет активным, когда вы нажмете эту кнопку.

person kevhender    schedule 22.08.2013
comment
Ты замечательный. Извините, я не понял вторую часть вашего поста. Я создал 2 функции касания, одна из которых передается в HomeContainer, а другая — в ReadyContainer. Это работает. Еще один вопрос: поскольку readyContainer является навигационным представлением, нажатие его на домашний контейнер (навигационное представление) приводит к тому, что на экране появляются две строки заголовка. Любая помощь? - person user2701143; 23.08.2013
comment
Я бы не стал вставлять один NavigationView в другой. Просто сделайте readyContainer обычным Container с конфигурацией title. - person kevhender; 23.08.2013
comment
Мне пришлось сделать readyContainer навигационным представлением, потому что к нему нужно было получить доступ из нижней панели вкладок. - person user2701143; 23.08.2013