Bezdepbonusu7Программирование: статьи и ответы

Вопрос

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

Автор вопроса: user2701143Ответов: 1

В 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, какой контейнер я использую для отправки представления, потому что я не знаю, попал ли пользователь на этот экран с помощью кнопки на домашнем представлении или на панели вкладок "Готово".

tabbarextjs

Ответы

Ответ 1 · kevhender

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

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы