Tabpanel brokes practices of MVC pattern

[lexer]

To create Iphone like bottom navbar I should use Tabpanel.

The bad thing here is that instead of controller tabpanel itself is responsible to set activeitems.

I tried to use tabbar separately from tab panel, but found that it is deeply coupled with tab panel and cannot be used without it.

I think you should decouple tabbar from tabpanel, so it can be used as menu control, which change event could be used to controller's actions.

[lexer]

I've made a hack to get it work. But I think this should be solved by framework.

app.views.Viewport = Ext.extend(Ext.Panel, {
            dockedItems: [
                new Ext.TabBar({
                            dock : 'bottom',
                            ui   : 'dark',
                            layout: { pack: 'center'},
                            cardLayout: this.layout,
                            cardSwitchAnimation: this.cardSwitchAnimation,
                            items: [
                                {
                                    iconCls: 'activity',
                                    text: 'Activity',
                                    controller: app.controllers.activity,
                                    action: 'index'
                                },
                                {
                                    iconCls: 'prescriptions',
                                    text: 'Prescriptions',
                                    controller: app.controllers.prescriptions,
                                    action: 'index'
                                },
                                {
                                    iconCls: 'doctors',
                                    text: 'Doctors',
                                    controller: app.controllers.doctors,
                                    action: 'index'
                                },
                                {
                                    iconCls: 'myinfo',
                                    text: 'My info',
                                    controller: app.controllers.myinfo,
                                    action: 'show'
                                }
                            ],
                            listeners: {
                                'render' : function(bar) {
                                    var tabs = bar.query('.tab')[0].activate();
                                },
                                'change': function (bar, currentTab, card) {
                                    var tabs = bar.query('.tab');

                                    var previousTab = null;

                                    for (var i = 0; i < tabs.length; i++) {
                                        if (tabs[i].active) {
                                            previousTab = tabs[i];
                                            tabs[i].deactivate();
                                        }
                                    }

                                    var direction = (bar.items.indexOf(currentTab) < bar.items.indexOf(previousTab)) ? 'right' : 'left';

                                    Ext.dispatch({
                                                controller: currentTab.controller,
                                                action: currentTab.action,
                                                animation: {type:'slide', direction:direction}
                                            });

                                    currentTab.activate();
                                }
                            }
                        })
            ],

Hope you solve this in future versions.

[SpNg]

I'm running into the same problem here. I have cards that don't belong in the bottom tabbar of a tabpanel, but when I render them with the controller the tabpanl starts adding them to the tab bar. Your solution is right on point of what I'm about to write. I wonder if there is something we are missing with best practice here.

Thanks for your post.

[preyz]

Same problem here!!!

Sencha released a new Screencast that demonstrates how to create an interface like we imagine. However, even though the example code is using a MVC-like pattern, it does not include controller files. Maybe not a coincidence? Check it out:
http://vimeo.com/22251762

[dreamdu5t]

Has anyone figured out a better solution to this? Otherwise, I'll have to use lexer's hack (thanks lexer!!!).

This should be handled by the framework, as there is no clean way to use an MVC architecture with tabs.

[interfasys]

It's not necessarily wrong if Sencha is trying to build a framework that contains HMVC patterns. From my point of view, it's OK to have a hierarchy for some parts of the GUI.

[dreamdu5t]

It's not necessarily wrong if Sencha is trying to build a framework that contains HMVC patterns. From my point of view, it's OK to have a hierarchy for some parts of the GUI.

Well it's not wrong, it just sucks that this is one of the few components that breaks the MVC pattern.

[miroamarillo]

I was starting a new project with the MVC Model proposed by the videos and suddenly I bumped with this post. What are the recommendations then?? discard the MVC model and do it with the index.js and the Ext structure with the onReady function? Any hint here would be really appreciated as I found the MVC way a bit intricate for people that is just getting to know Sencha Touch. Any advice???

[dreamdu5t]

I was starting a new project with the MVC Model proposed by the videos and suddenly I bumped with this post. What are the recommendations then?? discard the MVC model and do it with the index.js and the Ext structure with the onReady function? Any hint here would be really appreciated as I found the MVC way a bit intricate for people that is just getting to know Sencha Touch. Any advice???

You can:

* Live with having logic in your views.
* Use the method lexer posted above.
* Abandon the MVC pattern altogether.

I'd recommend using lexer's method. It would just be nice to have it in the framework.

[tinyfactory]

I ended up using a derivative of lexer's post. Don't use a tab panel, use a toolbar with tabs that you active on your own, and use the rendering approach of the MVC pattern. I personally really like the MVC pattern as it keeps the DOM lightweight. Just mimic the functionality of the tab panel, and use the MVC pattern.