PDA

View Full Version : Prerender components (Windows) on application startup



extjsuser84
23 Jul 2013, 4:15 AM
Hi,
My application have a lot of window component (simple and complex layouts) and the only way to increase the poor performance in old browsers (IE6) running on VM seems to be to pre-render windows.
Infact, every time I open a window it take about 1 or 2 second to show up (also for the simple windows). I solve partially with closeAction: 'hide' config, ensuring not to destroy the windows when closed and making the show faster the second time, 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 "pre-render" the window hidden, in order to create the corresponding DOM element which can then show later? For example, rendering a set of hidden windows at the initial startup of the application and showing when needed (show quickly even the first time).

slemmon
25 Jul 2013, 9:09 AM
Try rendering the window to the doc body in the window config:



var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
closeAction: 'hide',
items: {
xtype: 'grid',
border: false,
columns: [{header: 'World'}],
store: { fields: [] }
},
renderTo: document.body
});

extjsuser84
26 Jul 2013, 6:24 AM
Ok, thx slemmon :)

If i set renderTo: document.body in the window config I am able to render the window without showing it. But i've another problem now...
In my application all the window must be shown inside a center container (viewport has a border layout).
Now when I want to show the "hidden" window I need to constraint it to the container in the center region. Even if I add the window to the container before show it (centerContainer.add (win)), the window still remain child of the doc body and i can drag out of the limits of the center container.

There is a way to change the parent after the window is rendered?

Ps: I use extjs 4.1.3 and constrainTo config doesn't work fine with windows ;)

slemmon
26 Jul 2013, 8:57 AM
See if the example below helps. The center region is defined with the window added as a child item that renders to the body element of the owning panel.



Ext.define('MyCenter', {
extend: 'Ext.panel.Panel',
alias: 'widget.mycenter',


tbar: [{
text: 'Show My Window',
handler: function (btn) {
btn.up('mycenter').down('#myWindow').show();
}
}],


initComponent: function () {
var me = this;


me.callParent(arguments);


me.add({
xtype: 'window',
itemId: 'myWindow',
constrain: true,
title: 'Center Window',
renderTo: me.body,
height: 300,
width: 300,
title: 'Window'
});
}
});




Ext.widget('viewport', {
layout: 'border',
defaults: { width: 400 },
items: [{
xtype: 'mycenter',
region: 'center'
}, {
region: 'east',
title: 'East',
collapsible: true
}]
});

extjsuser84
29 Jul 2013, 1:38 AM
If i add the window as a child item of the center panel (and renders to the body element of the panel) the corresponding dom element is not created. I cannot see any div for windows into generated html.
The only way for obtain this seems to be to render to document.body but with problems explained in my last post (window isn't constrained into center container) :(

slemmon
30 Jul 2013, 11:12 AM
Oh, ok. I see what's missing. You'll need to wait for the owning panel to be rendered before trying to render the child window to its body. See below:



Ext.define('MyCenter', {
extend: 'Ext.panel.Panel',
alias: 'widget.mycenter',




tbar: [{
text: 'Show My Window',
handler: function (btn) {
btn.up('mycenter').down('#myWindow').show();
}
}],




initComponent: function () {
var me = this;




me.callParent(arguments);


var win = Ext.widget({
xtype: 'window',
itemId: 'myWindow',
constrain: true,
title: 'Center Window',
height: 300,
width: 300,
title: 'Window',
listeners: {
afterrender: function () {
console.log(this);
}
}
});


me.on({
afterrender: function () {
win.render(me.body);
me.add(win);
},
single: true
});
}
});








Ext.widget('viewport', {
layout: 'border',
defaults: { width: 400 },
items: [{
xtype: 'mycenter',
region: 'center'
}, {
region: 'east',
title: 'East',
collapsible: true
}]
});

extjsuser84
31 Jul 2013, 1:58 AM
Oh, ok. I see what's missing. You'll need to wait for the owning panel to be rendered before trying to render the child window to its body. See below:



Ext.define('MyCenter', {
extend: 'Ext.panel.Panel',
alias: 'widget.mycenter',




tbar: [{
text: 'Show My Window',
handler: function (btn) {
btn.up('mycenter').down('#myWindow').show();
}
}],




initComponent: function () {
var me = this;




me.callParent(arguments);


var win = Ext.widget({
xtype: 'window',
itemId: 'myWindow',
constrain: true,
title: 'Center Window',
height: 300,
width: 300,
title: 'Window',
listeners: {
afterrender: function () {
console.log(this);
}
}
});


me.on({
afterrender: function () {
win.render(me.body);
me.add(win);
},
single: true
});
}
});








Ext.widget('viewport', {
layout: 'border',
defaults: { width: 400 },
items: [{
xtype: 'mycenter',
region: 'center'
}, {
region: 'east',
title: 'East',
collapsible: true
}]
});



Ok, it works!
The problem was that my center container was not a Ext.panel.Panel, but a Container that does not have the body property.
Now I can see the corresponding HTML code for windows within the body of the center panel div.

Changing the type of component has now generated other issues I have to solve, such as the fact that now when I expand/collapse the east panel all the windows moving within the central panel. D'oh! :)

Thanks a lot for your help.