Extjs MVC - 在tabpanel中每个标签都有一个特殊的cotroller

Question

我有一个MainController来监听整个应用中的事件（全局） 我的应用程序有标签面板，每个面板都非常复杂，需要有自己的控制器（很多人） 如何为每个标签面板添加一个特殊控制器来处理自己的事件？ 如果你看到吼叫。我在方法MainController中有onMenuItemClick个新标签页 我希望MainController让其他控制器处理标签打开和标签事件监听。

例如。
MainController致电CustomerController CustomerController在客户标签<仅> 上收听活动 CustomerController延长BaseTabController BaseTabController在所有标签中收听类似事件并处理标签页打开。

这是我到目前为止所做的：

Ext.application({
    name: 'App',
    controllers: ['MainController'],
    stores : ['MainMenuStore'],
    autoCreateViewport: true,
    appFolder: '/app',
});

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

    refs: [{ ref: 'tabs', selector: 'viewport > #tabs'}],

    init: function () {
        this.control({
            'viewport > #nav': {
                itemclick: this.onMenuItemClick
            }
        });

    },

    onMenuItemClick: function (view, rec) {
        var id = rec.raw.panel;//Can be the controller name for example
        var cls = "App.view." + id;
        var tabs = this.getTabs();
        var tab = tabs.child('#' + id);
        console.log(tab);
        if (!tab) {
            tab = tabs.add(Ext.create(cls, {
                itemId: id,
                title: rec.get('text')
            }));
        }
        tabs.setActiveTab(tab);
    }
});

这是我想要实现的基本uml。

Answer 1

这正是DeftJS的用途。

使用DeftJs，您可以为每个视图提供自己的控制器。这将应用于您的每个视图实例。此外，您的特殊控制器可以从您的基本控制器进入。

查看DeftJS Docs

上的文档

示例：

查看：

   Ext.define( 'MyProject.view.tab.Main', {
      extend: 'Ext.tab.Panel',
      controller: 'MyProject.controller.tab.Main',
      ...

控制器：

   Ext.define( 'MyProject.controller.tab.Main', {
      extend: 'Deft.mvc.ViewController',
      ...