PDA

View Full Version : Slow performance of tab click



RobertGary1
6 Aug 2013, 4:46 PM
I'm finding that each time I click a tab in a tabpanel there is a delay of about 2 seconds. My tab contents are somewhat complex with grids, etc. What I'm seeing in the profiler is a lot of... So it seems that each tab click results in a a recalculation of the layout. Is there a way to avoid this unless the screen aspect has changed?

-Robert


Ext.define.getStyle 2.22%
2.22%
2.22%
ext-all-dev.js:53231
Ext.define.getOverflowXStyle
2.22%
2.22%
ext-all-dev.js:52898
Ext.define.beginLayoutCycle
1.30%
1.30%
ext-all-dev.js:169072
Ext.define.resetLayout
1.30%
1.30%
ext-all-dev.js:168736
Ext.define.invalidate
1.30%
1.30%
ext-all-dev.js:168736
Ext.define.invalidate
1.30%
1.30%
ext-all-dev.js:168736
Ext.define.invalidate
1.06%
1.06%
ext-all-dev.js:168736
Ext.define.invalidate
1.06%
1.06%
ext-all-dev.js:168609
Ext.define.flushInvalidates
1.06%
1.06%
ext-all-dev.js:169135
Ext.define.run
1.06%
1.06%
ext-all-dev.js:42417
Ext.define.statics.flushLayouts
0.74%
0.74%
ext-all-dev.js:46370
Ext.resumeLayouts
0.74%
0.74%
ext-all-dev.js:180725
Ext.define.setActiveTab
0.74%
0.74%
ext-all-dev.js:179321
Ext.define.onClick
0.74%
0.74%
(anonymous function)
0.74%
0.74%
ext-all-dev.js:16843
wrap

westy
7 Aug 2013, 3:55 AM
You cannot prevent the layout, but you can certainly make there be less of them.
Every time a style is added/removed, visibility set/unset, enabled state set/unset etc, a layout may occur.

To prevent many occurring whilst you're in the middle of your processing use Ext.suspendLayouts and resumeLayouts, or the handy batchLayouts (that does both for you).

Putting these in the right place can make a huge difference.

Hope that helps,
Westy

Edit: Oh, maybe you're already doing that, looking at the log above?