Tabpanel brokes practices of MVC pattern

[jchau]

any updates on the best practice to do this???

[tinyfactory]

I ended up not using a tab panel, but just a bottom docked toolbar, with a bunch of tab components. When the tabs are tapped I have logic to make them active / inactive and dispatch to the controller to render the appropriate panels. Hope this helps.

[senchito]

i also just ran into the same issue and am very glad to have found this thread! I will try lexer's example.

Tinyfactory is there any chance you could post an example of what you did? I also tried to use a toolbar but I found that it didn't accept my custom icons the same way the tabpanel was.. the icons are much smaller and the 'selected' style is quite different as well. I haven't tried to hack that style yet but I really like the look&feel of the tabpanel and was hoping to keep using that.

If you can make the toolbar look like a tabpanel i'd love to know how.

[tinyfactory]

Sure. It took me a bit of digging to get everything working correctly initially. In the end this turned out to be very stable and allow me to use the MVC pattern to render panels to my Viewport as needed. This code is a snippet from my application Viewport in the dockedItems: [ ] array. Let me know if you want to see the whole panel:

{
    xtype: 'tabbar',
    dock: 'bottom',
    ui: 'dark',
    layout: {
        pack: 'center'
    },
    items: [
        {
            id: 'home-tab',
            xtype: 'tab',
            iconCls: 'icon-home',
            text: 'Home',
            handler: function(){
                if(!this.getEl().hasCls('x-tab-active')){
                    Ext.dispatch({
                        controller: 'Viewport',
                        action: 'renderHomeMenu'
                    });                                    
                }
            }
        },
        {
            id: 'suppliers-tab',
            xtype: 'tab',
            iconCls: 'icon-suppliers',
            text: 'Suppliers',
            hidden: HIDE_SUPPLIERS_BTN == true ? true : false,    //    this is set in the config.js file.  removed when app is branded for a specific supplier
            handler: function(){
                if(!this.getEl().hasCls('x-tab-active')){
                    Ext.dispatch({
                        controller: 'Viewport',
                        action: 'renderSuppliers'
                    });
                }    
            }                            
        },                        
        {
            id: 'favorites-tab',
            xtype: 'tab',
            iconCls: 'icon-favorites',
            text: 'Favorites',
            handler: function(){
                if(!this.getEl().hasCls('x-tab-active')){
                    Ext.dispatch({
                        controller: 'Viewport',
                        action: 'renderFavorites'
                    });
                }    
            }                            
        },
        {
            id: 'contact-tab',
            xtype: 'tab',
            iconCls: 'user',
            text: 'Contact',
            handler: function(){
                if(!this.getEl().hasCls('x-tab-active')){
                    Ext.dispatch({
                        controller: 'Viewport',
                        action: 'renderContact'
                    });
                }    
            }                            
        }                        
    ]
}

The tab's active class ('x-tab-active') is being in the "render" event of the matching panel. I typically don't like to reference components by id, but in this situation it was the simplest solution. For example if you were to tap on my the "Favorites" tab, I have this in the "Favorites Panel":

listeners: {
    render: function(){
        Ext.getCmp('favorites-tab').getEl().addCls('x-tab-active');
    }
}

Hoe this helps.

Alexander Rolek