1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Answers
    4
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Question Unanswered: MVC for a tab panel with controllers for each tab

    Unanswered: MVC for a tab panel with controllers for each tab


    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.

    Code:
    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'
            }
            ]
        }
    });

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Answers
    1
    Vote Rating
    0
    michaelreneer is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    6
    Answers
    1
    Vote Rating
    0
    pjennings is on a distinguished road

      0  

    Default


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

    Code:
            this.control({
                'firsttabview > button[name=some_button]': {tap: this.someButtonTap},
                ...
            });
    And list all of your controllers in your application.

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Answers
    1
    Vote Rating
    0
    michaelreneer is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    52
    Answers
    2
    Vote Rating
    1
    testvogel is on a distinguished road

      0  

    Default


    Do you have found any solutions?

  6. #6
    Sencha User
    Join Date
    Sep 2009
    Posts
    289
    Vote Rating
    0
    diegolovison is on a distinguished road

      0  

    Default


    You can find an example using sencha touch 2, tab panel and mvc at: goo.gl/IVmvLe