1. #1
    Sencha User
    Join Date
    Jul 2008
    Posts
    57
    Vote Rating
    0
    Markj is on a distinguished road

      0  

    Default Howto Add/Remove (dynamically) Tabs from TabPanel

    Hi

    Adding tabs dynamically to a TabPanel is pretty easy..

    http://extjs.com/deploy/dev/examples/tabs/tabs-adv.html

    However removing them isn't (if you dont know the ids of the tabs)

    I would have thought you just could iterate over items on the tabpanel, but you cant, because (if you use firebug) the array is "empty"...

    if you inspect the panel in firebug you can see that you would to do something like this panel.items.items, to get tabs.. (notice, this still wont help to remove items because it is "empty")

    So how is this suppose to be done?

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    84
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default

    tabPanel.remove(someTab, true);

    tabPanel.add(someNewTab);
    tabPanel.setActiveTav(someNewTab);

  3. #3
    Sencha User
    Join Date
    Jul 2008
    Posts
    57
    Vote Rating
    0
    Markj is on a distinguished road

      0  

    Default

    Thanks, but i still need af piece of the puzzle

    i need to get someTab, from the tabPanel, before i can do this tabPanel.remove(someTab, true);

    and when you cant iterate items on tabPanel and dont know the Ids, then you have a "no go".

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,568
    Vote Rating
    55
    Animal will become famous soon enough Animal will become famous soon enough

      1  

    Default

    You must know something about the Panel that you want to remove, because you know you want to remove something.

  5. #5
    Sencha User
    Join Date
    Jul 2008
    Posts
    57
    Vote Rating
    0
    Markj is on a distinguished road

      0  

    Default

    I know that i have a panel and that i have added tabs at one point...

    However i could store the tabs in an array while adding them to the panel, because then i would something about the tabs later on... but that wouldn't be "pretty"!

    I would think that the right way to this problem would be that items on tabpanel actually worked, so i would just iterate over it and do

    panel.items.each(function(item){
    panel.remove(item)
    })

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,568
    Vote Rating
    55
    Animal will become famous soon enough Animal will become famous soon enough

      0  

    Default

    So you want to remove them all? That code above will work.

  7. #7
    Sencha User
    Join Date
    Jul 2008
    Posts
    57
    Vote Rating
    0
    Markj is on a distinguished road

      0  

    Default

    except that items is considered to be empty for some reason, even though the tabs are their..

    yes, i wanna remove them all

  8. #8
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    84
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default

    try:
    (it should work with panel.items.each);
    Code:
    Ext.each(panel.items.items, function(childPanel) {
        panel.remove(childPanel, true);
    
    });

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,568
    Vote Rating
    55
    Animal will become famous soon enough Animal will become famous soon enough

      0  

    Default

    Code:
    myTabPanel.items.each(function(c){myTabPanel.remove(c);})
    SHoujld work just fine.

  10. #10
    Sencha User
    Join Date
    Jul 2008
    Posts
    57
    Vote Rating
    0
    Markj is on a distinguished road

      0  

    Default

    you are right, it works.. i dont know why it didn't work for me in the begining..

    and when i saw that items where empty in firebug

    console.log(tabPanel.items) -> []

    then i thought something where wrong... even though it works now, it just makes it even more confusing to get the above result in firebug