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

    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 - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    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,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    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,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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 - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    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,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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