sencha-touch - 具有多个控制器的 TabBarView（最佳实践）

Question

因为我对 sencha touch 2.0 还很陌生，所以我想知道：
如何为每个选项卡创建一个带有控制器的 TabBarView？

我的想法：
创建控制器 onTabChange。但是一定有更优雅的方式吗？

我的第一种方法：

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
    }

});

Answer 1

定义多个控制器，在您的应用程序中配置它们，并在每个控制器中使用以下内容：

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

仅配置对相应选项卡控制器中可用组件的控制。