1. #11
    Sencha User
    Join Date
    Jun 2008
    Posts
    138
    Vote Rating
    7
    jchau is an unknown quantity at this point

      0  

    Default


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

  2. #12
    Touch Premium Member
    Join Date
    Feb 2011
    Location
    San Diego, CA
    Posts
    43
    Vote Rating
    4
    tinyfactory is on a distinguished road

      0  

    Default


    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.

  3. #13
    Touch Premium Member senchito's Avatar
    Join Date
    Aug 2011
    Location
    Montreal, QC
    Posts
    27
    Vote Rating
    0
    senchito is on a distinguished road

      0  

    Default


    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.

  4. #14
    Touch Premium Member
    Join Date
    Feb 2011
    Location
    San Diego, CA
    Posts
    43
    Vote Rating
    4
    tinyfactory is on a distinguished road

      0  

    Default


    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:

    Code:
    {
        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":

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

    Alexander Rolek

Similar Threads

  1. Replies: 2
    Last Post: 29 Dec 2010, 9:38 AM
  2. Replies: 0
    Last Post: 6 Apr 2008, 10:49 AM
  3. Best practices for loading TabPanel dynamic content
    By bdperk in forum Ext 2.x: Help & Discussion
    Replies: 9
    Last Post: 6 Feb 2008, 4:05 PM
  4. ie brokes my tabs :D
    By luke83 in forum Ext 1.x: Help & Discussion
    Replies: 15
    Last Post: 7 Nov 2006, 4:32 PM

Thread Participants: 8

Tags for this Thread