Ext.tab.TabPanel - performance when adding or hiding tabs Extjs3 vs. extjs4

[andrej_marincic]

Hello,
this is probably not a real bug but more a performance isue.

I have GUI where tabs are loaded after i select a certain node in tree menu.
Tabs (configs) are loaded dinamically via ajax request.

I have a lot of tabs 20 - 30.

I noticed that hiding a tab in EXT JS 4 takes more than 5 time longer than hiding a tab in EXT JS 3.

In ExtJS 4 I hide tabs like this:
panel.getTabBar().items.each(function(t){
t.hide(); //i also tryed t.setVisible(false)
});

notice: it takes 0.6 SEC to hide 20 tabs

In ExtJS 3 I hide tabs like this:
panel.items.each(function(t){
panel.hideTabStripItem(t.id);
});

notice: it takes 0.04 SEC to hide 20 tabs

When i create tabs (with panel.add()) it takes:
- 0.6 SEC for 20 tabs with ExtJS 4
- 0.12 SEC for 20 tabs with ExtJS 3

notice: deferredRender is ON in both cases, config object is the same in both cases and is simple like this {title: 'tab name', xtype: 'container'}

0.06 SEC is not a long time, but i load tabs when i select certain node in TreePanel menu, and if i change selections fast, GUI feels very slow - non responsive. In ExtJS 3 it was really fast, you coudn't even tell it was loaded dinamically.

Is there a way to make this work faster? I tryed several things including suspendEvents + calling doLaout at the end, but i really didn't know what i was doing so it wasn't successfull :/


BTW i really like EXT JS and i love you guys!

[andrej_marincic]

Ok now i got it to work almost as faster.

Before hiding and adding logic i call:

panel.getTabBar().suspendLayout = true;
panel.suspendLayout = true;

and then ater adding part i call:
panel.getTabBar().suspendLayout = false;
panel.suspendLayout = false;
panel.getTabBar().doLayout();

Now it is "just" 100% slower than ExtJS 3.