TabBarView с несколькими контроллерами (лучшие практики) - PullRequest
Новая
       0

TabBarView с несколькими контроллерами (лучшие практики)

0 голосов
/ 24 ноября 2011


Так как я довольно новичок в Sencha Touch 2.0, мне было интересно:
Как мне создать TabBarView с контроллером для каждой вкладки?

Моя идея:
Создайте контроллер на TabChange. Но должен быть более элегантный способ?

Мой первый подход: 

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

    views: [
        'TabBar',
        'About'
    ],

    ref: [
    ],

    requires: [
        'app.controller.About'
    ],

    init: function() {
        // Create tabbar and listen for events
        this.tabBarView = this.getTabBarView().create();
        this.tabBarView.addListener('activeitemchange', this.onActiveitemchange, this);

        // Add views to tabbar
        var aboutView = this.getAboutView().create();
        this.tabBarView.add(aboutView);

        // TODO: Add more views

        // Crate application listeners
        this.application.addListener('changeTab', this.changeTab, this);

    },

    /**
     * Change tab (fired from views inside tabbar)
     */

    changeTab : function() {
        this.tabBarView.setActiveItem(0);
    },

    /**
     * Listen for tabchange an map controller to view
     */
    onActiveitemchange : function(container, newView, oldView, e) {
        console.info("tabchange");

        // Create appropiate controller
        switch (newView.alias[0]) {
            case 'aboutView':
                var aboutController = this.application.getController('About');
            break;

           // TODO: Add more breakpoints

            default:
            console.warn("No controller mapped to: "+newView.alias);

        };

        // TODO: Remove old controller
    }

});

1 Ответ

0 голосов
/ 18 января 2012

Определите несколько контроллеров, настройте их в своем приложении, и в каждом контроллере используйте следующее: 

init: function() { 
   this.control({
       'your selector': {
           event: 'function-name to execute on event'
       },
       ....
   });
}

Настройка управления только для компонентов, доступных в соответствующем контроллере вкладок.

...