Results 1 to 7 of 7

Thread: How to start with all tabBar items inactive?

  1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    4

    Default Answered: How to start with all tabBar items inactive?

    I am wondering if it is possible to start an app with all the (4 in my case) tabBar buttons inactive.
    The default seems to be to have tab number one active, but I would prefer if the user decided what he enters first.

    Thanks for the help!

  2. I write you two examples that show you how to do that.
    Take a look at the first one:

    Code:
    new Ext.Application({
        name: 'MyApp',
        launch: function() {
    
            var card1 = new Ext.Panel({
                html: 'This is the first button Tab'
            });
            
            var card2 = new Ext.Panel({
                html: 'This is the second button Tab'
            });
        
            var bar = new Ext.TabBar({
                dock : 'bottom',
                ui   : 'dark',
                layout: {
                    pack: 'center'
                },
                defaults: {
                    iconMask: true
                },
                items: [{
                    text: '1st Tab',
                    iconCls: 'star',
                    card: card1
                },{
                    text: '2nd Tab',
                    iconCls: 'info',
                    card: card2
                }],
                listeners: {
                    change: function(tb, tab, card){
                        myPanel.setActiveItem(card);
                    }
                }
            });
    
            var myPanel = new Ext.Panel({
                layout: 'card',
                dockedItems: [bar],
                fullscreen : true,
                items: [{
                    html: 'This is the No button Card'
                }]
            });
    
        }
    });
    As you can see in this example, I don't create a TabPanel, but a TabBar that I dock to a card layout panel. In this way the first "tab" have to button in the TabBar. I do this because if you define a TabPanel, you should always have at last the first card selected.

    Now take a look at the second example:
    (This is more easy)

    Code:
    new Ext.Application({
        name: 'MyApp',
        launch: function() {
    
            var viewport = new Ext.TabPanel({
                fullscreen : true,
                tabBar: {
                    dock : 'bottom',
                    ui   : 'dark',
                    layout: {
                        pack: 'center'
                    }
                },
                defaults: {
                    iconMask: true
                },
                items: [{
                    html: 'This is the No button Card'
                },{
                    title: 'First Tab',
                    iconCls: 'star',
                    html: 'This is the first button Tab'
                },{
                    title: 'Second Tab',
                    iconCls: 'info',
                    html: 'This is the second button Tab'
                }],
                listeners: {
                    render: function(tp){
                    
                        //Hide the first selected button
                        tp.tabBar.getComponent(0).hide();
                    }
                }
            });
    
        }
    });
    In this one, every tab has an associated TabBar button, with the only difference that, at TabPanel render, I hide the first selected Tabbar button. In this way you will be able to present a sort of "Welcome Tab" and ask the user to tap on the button they want, but they will see that there's no an already selected tab (button).

    PS: Remember to destroy tabs that you are no more able to see. Keep clean and light the DOM.

    Hope this helps.

  3. #2
    Sencha User AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    1,395
    Answers
    148

    Default

    Hi marshall.
    Take a look at this example if you want do makes all the TabPanel buttons disabled at your application startup.

    Code:
    Ext.setup({
        onReady: function() {
            
            var tabPanel = new Ext.TabPanel({
                fullscreen: true,
                tabBar: {
                    dock: 'bottom',
                    layout: {
                        pack: 'center'
                    }
                },
                defaults: {
                    iconMask: true,
                    iconCls: 'info'
                },
                items: [{
                    title: 'Tab1'
                },{
                    title: 'Tab2'
                },{
                    title: 'Tab3'
                },{
                    title: 'Tab4'
                }],
                listeners: {
                    render: function(tp){
                        
                        //Disable all the Tabs buttons
                        tp.tabBar.items.each(function(card){
                            card.setDisabled(true);
                        });
                        
                    }
                }
            });
            
        }
    });
    Hope this helps.
    PS: Sorry I have deleted the post for error. If this post reply to your issue like you already PM me, please mark this question as answered. Thank you!
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  4. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    4

    Default

    I was jumping with joy to quick.

    I don't want to deactivate the tab buttons in this way.
    I just don't want that the first tab is lightened up.
    In other words the status of the buttons has to set to not active, but still people are going to have to be able to activate them.

    Hope that is possible too.

  5. #4
    Sencha User AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    1,395
    Answers
    148

    Default

    I write you two examples that show you how to do that.
    Take a look at the first one:

    Code:
    new Ext.Application({
        name: 'MyApp',
        launch: function() {
    
            var card1 = new Ext.Panel({
                html: 'This is the first button Tab'
            });
            
            var card2 = new Ext.Panel({
                html: 'This is the second button Tab'
            });
        
            var bar = new Ext.TabBar({
                dock : 'bottom',
                ui   : 'dark',
                layout: {
                    pack: 'center'
                },
                defaults: {
                    iconMask: true
                },
                items: [{
                    text: '1st Tab',
                    iconCls: 'star',
                    card: card1
                },{
                    text: '2nd Tab',
                    iconCls: 'info',
                    card: card2
                }],
                listeners: {
                    change: function(tb, tab, card){
                        myPanel.setActiveItem(card);
                    }
                }
            });
    
            var myPanel = new Ext.Panel({
                layout: 'card',
                dockedItems: [bar],
                fullscreen : true,
                items: [{
                    html: 'This is the No button Card'
                }]
            });
    
        }
    });
    As you can see in this example, I don't create a TabPanel, but a TabBar that I dock to a card layout panel. In this way the first "tab" have to button in the TabBar. I do this because if you define a TabPanel, you should always have at last the first card selected.

    Now take a look at the second example:
    (This is more easy)

    Code:
    new Ext.Application({
        name: 'MyApp',
        launch: function() {
    
            var viewport = new Ext.TabPanel({
                fullscreen : true,
                tabBar: {
                    dock : 'bottom',
                    ui   : 'dark',
                    layout: {
                        pack: 'center'
                    }
                },
                defaults: {
                    iconMask: true
                },
                items: [{
                    html: 'This is the No button Card'
                },{
                    title: 'First Tab',
                    iconCls: 'star',
                    html: 'This is the first button Tab'
                },{
                    title: 'Second Tab',
                    iconCls: 'info',
                    html: 'This is the second button Tab'
                }],
                listeners: {
                    render: function(tp){
                    
                        //Hide the first selected button
                        tp.tabBar.getComponent(0).hide();
                    }
                }
            });
    
        }
    });
    In this one, every tab has an associated TabBar button, with the only difference that, at TabPanel render, I hide the first selected Tabbar button. In this way you will be able to present a sort of "Welcome Tab" and ask the user to tap on the button they want, but they will see that there's no an already selected tab (button).

    PS: Remember to destroy tabs that you are no more able to see. Keep clean and light the DOM.

    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  6. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    4

    Default

    Andrea you are my hero

    Thanks a million the last code did indeed the trick!

    Marcel

  7. #6
    Sencha User AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    1,395
    Answers
    148

    Default

    You are welcome Marcel
    Remember to set the question as answered.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  8. #7

    Default

    Hi, i'm use first code of this answer and have a problem ... the background of tabBar don't show ...

    Example,

    i see the background of panel and icons in the top.

    i tryed with ui: dark, light and not showing

Tags for this Thread

Posting Permissions

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