MVC for a tab panel with controllers for each tab

[robl]

I want to create a controller (and view) for each tab in my tab panel and I want a master controller (and view) for the tab panel itself. How do I define this? I know how to create just the view hierarchy like the code snippet below but I don't know how to wire up the controllers.

Ext.define('MyApp.view.MasterTabPanel', {
    extend: 'Ext.tab.Panel',
    requires: ['MyApp.view.FirstTab', 'MyApp.view.SecondTab', 'MyApp.view.ThirdTab'],
    config: {
        fullscreen: true,
        tabBarPosition: 'bottom',
        cardSwitchAnimation: 'flip',
        items: [
        {
            xtype: 'firsttabview'
        },
        {
            xtype: 'secondtabview'
        },
        {
            xtype: 'thirdtabview'
        }
        ]
    }
});

[michaelreneer]

I would be curious to know the best way to do this as well. Did you end up figuring it out? Thanks.

[pjennings]

I don't know if it's the best way, but I think it works if you make your controllers something like this:

        this.control({
            'firsttabview > button[name=some_button]': {tap: this.someButtonTap},
            ...
        });

And list all of your controllers in your application.

[michaelreneer]

I would think ideally you would want to define a controller that gave you the TabPanel view and handled the events of clicking on those tabs to decide which sub controllers to instantiate. And then you would want to define a new controller for each tab.

So lets say you had an app that had a tab bar along the bottom, one tab would be maybe a todo list and the other tab would be a settings tab. I would like:

TabController + TabView(for showing the tabs)

ToDoController + ListView (list of todos) + DetailsView (todo details) + FormView (so I can edit my todos)
SettingController + ListView (list of settings to change)

To me it doesn't seem like the "child controllers" should have the event handlers for deciding when they are shown.

[testvogel]

Do you have found any solutions?