1. #1
    Sencha User
    Join Date
    Dec 2011
    Location
    New york, NY
    Posts
    16
    Vote Rating
    0
    Answers
    1
    mbharathiraj is on a distinguished road

      0  

    Default Unanswered: Tab Panel - Issue hidding first tab

    Unanswered: Tab Panel - Issue hidding first tab


    I'm trying to hide the first tab. Below code only hides the first tab button but not the content. If I specifiy "hidden:true" either in second or third tab I don't see any issue. Can someone please help?

    Code:
    Ext.onReady(function() {
        var tabs = Ext.create('Ext.tab.Panel', {
            width: 400,
            height: 400,
            renderTo: document.body,
            items: [{
                title: 'Home',
                html: 'Home',
                itemId: 'home',
                hidden:true            
            }, {
                title: 'Users',
                html: 'Users',
                itemId: 'users'
               
            }, {
                title: 'Tickets',
                html: 'Tickets',
                itemId: 'tickets'
               
            }]
        });
      
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,545
    Vote Rating
    873
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I moved this to the Ext JS 4 Q&A forum.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Let try by configuring your tab with activeTab: N with N > 0 when hiding first tab.
    Code:
    Ext.onReady(function() {
        var tabs = Ext.create('Ext.tab.Panel', {
            width: 400,
            height: 400,
            activeTab: 1,
            renderTo: document.body,
            items: [{
                title: 'Home',
                html: 'Home',
                itemId: 'home',
                hidden:true            
           .....

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Location
    New york, NY
    Posts
    16
    Vote Rating
    0
    Answers
    1
    mbharathiraj is on a distinguished road

      0  

    Default


    It didn't work. I have specified activeTab to 1. Although it hides the first tab button and content, it doesn't enable the second tab.

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Vote Rating
    6
    Answers
    11
    Romick is on a distinguished road

      0  

    Thumbs up Bug?

    Bug?


    It seams like a bug. But if do like this it works:
    PHP Code:
      Ext.onReady(function() {
        var 
    tabs Ext.create('Ext.tab.Panel', {
            
    width400,
            
    height400,
            
    renderTodocument.body,
            
    activeItem1,
            
    activeTab1,
            
    items: [{
                
    title'Home',
                
    html'Home',
                
    itemId'home',
                
    hidden:true            
            
    }, {
                
    title'Users',
                
    html'Users',
                
    itemId'users'
               
            
    }, {
                
    title'Tickets',
                
    html'Tickets',
                
    itemId'tickets'
               
            
    }]/*,listeners: {
              render: function(){
                this.setActiveTab(1);
              }
            }*/
        
    }); 
    However, in docs:
    activeItem : String/NumberDoesn't apply for TabPanel, use activeTab instead.

  6. #6
    Sencha User
    Join Date
    Dec 2011
    Location
    New york, NY
    Posts
    16
    Vote Rating
    0
    Answers
    1
    mbharathiraj is on a distinguished road

      0  

    Default


    It's a bug. Specifying both activeTab and activeItem as part of the config resolves the issue. But in my case I want to do it dynamically. There is no setActiveItem method available.

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Location
    New york, NY
    Posts
    16
    Vote Rating
    0
    Answers
    1
    mbharathiraj is on a distinguished road

      0  

  8. #8
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Vote Rating
    6
    Answers
    11
    Romick is on a distinguished road

      0  

    Thumbs up No there is!!!

    No there is!!!


    There is no setActiveItem method available.

    No there is!!! I wrote it to you (commented) be attentive.

    PHP Code:
    /*,listeners: {
      render: function(){
        this.setActiveTab(1);
      }
    }*/ 
    setActiveTab(TabNumber);

  9. #9
    Sencha User
    Join Date
    Dec 2011
    Location
    New york, NY
    Posts
    16
    Vote Rating
    0
    Answers
    1
    mbharathiraj is on a distinguished road

      0  

    Default


    Quote Originally Posted by Romick View Post
    There is no setActiveItem method available.

    No there is!!! I wrote it to you (commented) be attentive.

    PHP Code:
    /*,listeners: {
      render: function(){
        this.setActiveTab(1);
      }
    }*/ 
    setActiveTab(TabNumber);
    I know the setActiveTab method. I'm not sepaking about that. Please read the bug info again. When you use hidden: true, setActvieTab method alone doesn't work. Instead remove the hidden config and use the hide and sectActiveTab method .