Results 1 to 3 of 3

Thread: TabPanel show hide tabBar icons

  1. #1
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Chico, CA
    Posts
    19
    Vote Rating
    0
      0  

    Default TabPanel show hide tabBar icons

    I'm new but love Sencha Touch...

    I've created a Viewport/TabPanel with the tabBar docked at the bottom. What I would like to do is show/hide tabBar icons depending on which tab I'm on. For example; I have an 'about' tabBar icon, when the user selects about - I would like to hide the tabBar. Another example; I have a login screen, I only want to show two tabBar icons - after the user logs in, I want to add more tabBar icons.

    I can't quite find what I'm looking for in the examples - anyone able to point me in the right direction??

    Cheers!

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
      0  

    Default

    hello

    you can try this
    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function(){
            var p = new Ext.Panel({
                fullscreen: true,
                layout: 'fit',
                dockedItems: [{
                    overlay: true,
                    dock: 'top',
                    xtype: 'toolbar',
    				cls : 'barr',
                     
                    items: {
                        text: 'Top'
                    }
                }, {
                    overlay: true,
                    dock: 'bottom',
                    xtype: 'toolbar',
                    cls : 'barr',
                    items: {
                        text: 'Bottom'
                    }
                }],
                items: {
                    xtype: 'carousel',
                    items: [{
                        layout: {
                            type: 'vbox',
                            pack: 'center'
                        },
                        items: {
                            xtype: 'button',
                            text: 'Hide toolbars',
                            handler: function(){
                                p.dockedItems.each(function(c){
                                    c.hide({type:'fade'});
                                });
                            }
                        }
                    }, {
                        layout: {
                            type: 'vbox',
                            pack: 'center'
                        },
                        items: {
                            xtype: 'button',
                            text: 'Show toolbars',
                            handler: function(){
                                p.dockedItems.each(function(c){
                                    c.show({type:'fade' }, {style: {opacity:0.1}});
                                });
                            }
                        }
                    }]
                }
            });
        }
    });

  3. #3
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Chico, CA
    Posts
    19
    Vote Rating
    0
      0  

    Default

    Thanks so much for the reply tonin10. I did figure it out, the biggest issue I was having was scope and how to use insert/add/remove/setActiveItem. The biggest issue I had was understanding that I needed at least one item in the TabPanel before the add/remove would work as I expected.

    Still loving Sencha!

Similar Threads

  1. Add a number on the icons in TabBar?
    By aCa in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 24 Nov 2010, 12:12 AM
  2. dynamic hide/show tab in tabpanel ?
    By intro in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 14 Aug 2010, 1:07 AM
  3. Replies: 2
    Last Post: 30 Jul 2010, 6:50 PM
  4. Hide/Show a tab in TabPanel
    By sigirisetti in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 23 Nov 2008, 11:32 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •