Sencha Touch 2 MVC — как переключать представления с помощью кнопки

У меня есть этот контроллер:

Ext.define('MyApp.controller.Test', {
    extend: 'Ext.app.Controller',

    config: {

    },

    refs: [
        {
            ref: 'first',
            selector: '#first'
        },
        {
            ref: 'second',
            selector: '#second'
        }
    ],

    views : [
        'TestMain',
        'TestSecond'
    ],

     init: function() {
          this.getTestMainView().create();


        this.control({
            '#first': {
                tap: function() {
                    //how do I go to second view here?
                }
            },
            '#second': {
                tap: function() {
                }
            }
        });
    }
});

и эти 2 представления:

    Ext.define('MyApp.view.TestMain', {
    extend: 'Ext.Container',
    xtype: 'testmain',

    config: {
        fullscreen: true,
        layout: 'vbox',
        scrollable: true,
         items: [
                {
                    xtype: 'button',
                    ui: 'normal',
                    id: 'first',
                    text: 'Go To Second Screen',
                    handler: function() {

                        //how do I go to second view here?
                    }
                }
            ]
        }
});

...

    Ext.define('MyApp.view.TestSecond', {
    extend: 'Ext.Container',
    xtype: 'testsecond',

    config: {
        fullscreen: true,
        layout: 'vbox',
        scrollable: true,
        items: [
                {
                    xtype: 'button',
                    ui: 'normal',
                    id: 'second',
                    text: 'Go To First Screen',
                    handler: function() {
                    }
                }
            ]
        }
});

Я хотел бы, чтобы второй вид загружался, когда я нажимаю первую кнопку, и наоборот, когда я нажимаю вторую кнопку. Кажется, я могу добавить код либо в свой обработчик кнопок, либо в раздел управления - я был бы признателен за пример обоих (если они не совпадают) и, возможно, за объяснение того, какой метод лучше и почему.

Обратите внимание, что я НЕ хочу использовать макет карты или панель вкладок - я хочу знать, как переключаться с одного автономного представления на другое (в моем приложении у меня есть панель карт и панель вкладок, и мне нужно переключаться между обеими группами с помощью кнопок)

Спасибо!!


sencha-touch sencha-touch-2
person cyberwombat    schedule 24.10.2011    source источник

Ответы (4)


arrow_upward
13
arrow_downward

Вместо обработчиков следует использовать this.control в контроллере:

this.control({
    '#first': {
        tap: function() {
            Ext.Viewport.add({
                xtype: 'testsecond'
            });
        }
    },

(вы можете убрать handlers: с кнопки в определении вида)

Кроме того, вам, вероятно, не следует жестко кодировать идентификаторы в первую очередь.

Вот как я обрабатываю такие кнопки:

items: [
            {
                xtype: 'button',
                ui: 'normal',
                text: 'Go To First Screen',
                go: 'testsecond'
            },
       ...

Затем в базовом контроллере, который применяется ко всем представлениям, я делаю что-то вроде:

this.control({
    'button[go]': {
        tap: function(btn) {
            Ext.Viewport.setActiveItem({
                xtype: btn.go
            });
        }
    },
person Attila O.    schedule 28.10.2011
comment
Я считаю, что для получения доступа к параметру «go» это на самом деле: btn.config.go (по крайней мере, для меня с ST 2.0.1) - person Intellix; 30.04.2012
comment
@DominicWatson, это была более ранняя версия. Что касается ST 2.0.1, вы можете создать подкласс кнопки, установить go как параметр конфигурации и просто использовать .getGo() на кнопке, как и со всеми другими параметрами конфигурации. - person Attila O.; 03.05.2012

arrow_upward
7
arrow_downward

Отличный ответ, но имейте в виду, что вызов setActiveItem() только с xtype создаст новые представления вместо повторного использования уже созданных, в итоге я использовал Ext.ComponentQuery, чтобы сначала получить цель, а затем setActiveItem для этого, вот код:

this.control({
        'button[go]': {
                tap: function(btn) {
                    viewport = Ext.ComponentQuery.query('my-custom-viewport-xtype');
                    target = Ext.ComponentQuery.query(btn.go);
                    viewport[0].setActiveItem(target[0]);
                }
            }
    });

Также обратите внимание, что я использую пользовательское окно просмотра для добавления эффектов слайда и тому подобного, но прямой вызов Ext.Viewport.setActiveItem(), как в предыдущем примере, также будет работать.

person Roberto    schedule 11.11.2011
comment
В итоге я разорвал приложение SenchaCon — оно использует контроллер для каждого представления и имеет метод для уничтожения каждого предыдущего представления. - person cyberwombat; 12.11.2011
comment
эти источники общедоступны?? Я также хотел бы взглянуть, так как документации по ST2 пока не так много.. Мне все еще интересно, действительно ли лучше каждый раз уничтожать/создавать, чем создавать один раз и повторно использовать.. - person Roberto; 12.11.2011
comment
во-вторых, что. Было бы очень полезно, если бы у нас было настоящее приложение для анализа - person Vassilis; 19.01.2012

arrow_upward
1
arrow_downward

Сначала нам нужно проверить, создан ли этот xtype уже или нет. Следующий код сделает это

var xtypeToDisplay = Ext.ComponentQuery.query(btn.go)[0];

if (xtypeToDisplay == undefined)
{
    xtypeToDisplay= Ext.create('Class_Name_for_that_Xtype');
}
person Tahir Rauf    schedule 15.03.2012

arrow_upward
1
arrow_downward

Это сработало для меня:

handler: function() {
    //how do I go to second view here?

    Ext.Viewport.setActiveItem(Ext.create('MyApp.view.TestSecond')); 
}
person JJ_Coder4Hire    schedule 25.11.2013