Extjs MVC - having a special cotroller per tab in tabpanel

Question

I have a MainController that listens to events in the entire app (globally).
My app has tab panel, and each panel is very complex and need to have its own controller (a lot of evets).
How will I add a special controller per tab panel to handle its own events?
If youll see bellow. I have the MainController opening new tabs in the method onMenuItemClick.
I want the MainController let other controllers handle the tab opening and tab event listening.

So for example.
MainController call CustomerController.
CustomerController listen to events on the customer tab only.
CustomerController extend BaseTabController.
BaseTabController listen to similar events across all tabs and handle tab opening.

This is what I have so far:

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);
    }
});

this is the basic uml that i want to achieve.

Answer 1

Thats exactly what DeftJS is for.

With DeftJs you can give each view its own controller. This will be applied for each instance of your views. Also, your special controllers can inhert from your base controller.

Check out the docs at DeftJS Docs

Example:

View:

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

Controller:

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