Removing a tab from tabPanel

Question

var tabPanel = Ext.getCmp('tabPanel');
for(var i=1; i<tabPanel.items.length; i++)
{
    tabPanel.items.removeAt(i);
    i--;
}
tabPanel.doLayout();

I'm trying to remove all the tabs (except the first one) from the tabPanel. This code is doing that. I checked it using firebug.
But still, it is not reflecting in the UI. Isn't doLayout() enough?

Ruan Mendes · Accepted Answer · 2012-04-27T06:17:50.703

4

Instead of calling

tabPanel.items.removeAt(i);

Call

tabPanel.remove(tabPanel.items.getAt(i));

Then you're telling the container instead of the mixed collection to remove the tab

Another way to do it is

tabPanel.removeChildEls(function(tab){
  return tab != tabPanel.items.first();
});

edited Apr 27 '12 at 06:17

answered Apr 27 '12 at 06:12

Ruan Mendes

90,375
31
153
217

it worked... thanks a lot... but can you tell me the why the above code wasn't working? – Shashwat Apr 27 '12 at 06:37
My comment in the answer explains it. `tabPanel.items.removeAt(i)` removes it from the items `MixedCollection` but doesn't notify the `tabPanel` that the tab was removed. The items collection should be accessed in a read-only manner. Use the `TabPanel` (inherited from `Container`) methods to add/remove child components (tabs) – Ruan Mendes Apr 29 '12 at 04:55
I got it. But while adding and removing items from a normal Panel, it works. remove function automatically notifies the panel and does the layout. Then why not in tab panel? – Shashwat Jun 19 '12 at 09:06
@Shashwat You should not use it, it's not supported. Just because it works doesn't mean it's OK. There are methods in Ext.Container to add and remove items, why do you insist on hacking it? – Ruan Mendes Jun 19 '12 at 17:32

score 0 · Answer 2 · answered Jul 17 '14 at 14:18

This closes a tab by clicking the middle button of your mouse.

var middleClick = $(document).mousedown(function(e) {
    if(e.which == 2){
              var tabPanel = <%= tabPanel.ClientID %>;    
              var activeTab = tabPanel.getActiveTab();
              if (e.target.textContent == activeTab.title) {
                  var activeTabIndex = tabPanel.items.findIndex('id', activeTab.id);
                  tabPanel.remove(activeTabIndex);
              }
          }
          return true;
    });

Hope it helps!! =)

Removing a tab from tabPanel

2 Answers2