View Full Version : Cache Views, Prerender?

Alexander Bauer
12 Jul 2013, 9:46 AM
Hi folks,

I have a tabpanel which is quite heavy and therefore renders 2-3s, its always the same tab. I wonder if its possible to cache the layout/generated html/events etc. or even pre render the cmp in the background. The browser hangs up for some seconds which is influencing the ux.

I already use suspendLayout() and I already have checked for overusing components.

Did somebody something similar or has any advices to improve the speed?

14 Jul 2013, 8:47 PM
I'm not familiar with a caching scheme for page elements. Can any of the child components on the tab be added just-in-time or even on a timer to improve the initial load time?

Alexander Bauer
14 Jul 2013, 11:16 PM
The (tab)panel and all its child elements are created upon dblclick on a grid row, is that what you mean by just-in-time? I thought of something like copying the generated html (with new elIds of course) for a new tabpanel. I think the layout process is the heavy one.

The browser hangsup for some seconds, that leads to a lag of the LoadingMask.

16 Jul 2013, 2:05 PM
You might try bookending the add process with:

Alexander Bauer
17 Jul 2013, 9:24 AM
Thanks for the tip, but as mentioned in my #1 post I already use that technique. Unfortunately I dont see any speed improvements.

I basically do:

var tab = me.buildTab(record);
me.setActiveTab(me.items.length - 1);

buildTab does:

var tab = Ext.create('Ext.panel.Panel', {

return tab;

but this has no speed improvement at all.

19 Jul 2013, 7:29 AM
I've a similar problem. My application have a lot of windows and the only way to increase the poor performance in old browsers (IE6) running on VM is to pre-render windows.
Infact, every time I open a window it take about 1 or 2 second to show up. I solve partially with closeAction: 'hide' config, but the window need however to be rendered (show()) the first time before the corresponding DOM element is created.
My question is: there is a way to render the window hidden, in order to create the corresponding DOM element which can then show later?