PDA

View Full Version : Window object performance problem



lakilevi
25 Nov 2010, 3:55 AM
Hi.
I made a complex application with many grids, trees and layouts. All the api is based on the simple fact that does not need to reload the page, every functionality is solved by exjs window objects.
All this goes fine and fast, until some minutes and some more extjs window openings/closings. I observed that if I work with the system, and open/close windows more times, the system goes slower and slower.
I think the memory usage of the browser if growing.
When I close a window object by win.hide() in background there are distroyed the objects? Or how can I destroy them on hide, to free some memory.
Or do you have any other solution to make faster the window loads and to awoid to blow up the browser memory usage?

This is actually a very hard problem for me, because on longer work time my system becomes very very slow and hard to handle.

Thank you very much!

Condor
25 Nov 2010, 6:45 AM
Closing a window destroys it, but hiding a window does not.

Memory usage is not the problem, it's DOM size.

In my application:
1. I don't render components until I need them.
2. I close (instead of hide) windows that are not used often.
3. I clear grid stores in windows (and cards) when they are hidden.

lakilevi
12 Jan 2011, 1:26 AM
Thanks Condor!
It was very helpfull.
My application does not geting slower and slower by time any more, but the window opening it is still slow. I have a simple window, with cca. 6-10 input elements (inputfields, comboboxes, textareas) and sometimes also a simple extjs basic html editor.
The problem is that it takes sometimes 2-3 seconds to load this simple window. All my modules are window based, and this is a hard problem for me...
I have a very good processor, so it cannot be this the problem. I use the ext 3.2.1. It is not still the last version. Do you think this can be the problem? I also used in my earlier projects extjs version 2.2. and that seemed to be faster in window loading.

Thank you very much!

Condor
13 Jan 2011, 12:04 AM
What do you mean by 'loading'? Do you mean creating and rendering or are you actually loading those fields with data from a server?

ps. Ext 2.2 was faster in laying out components then Ext 3. This is one of the key areas that have been optimized in the new Ext 4.

lakilevi
13 Jan 2011, 12:12 AM
I mean the creating and rendering, all on client side. If I have a window with grid, it loads much faster than a window with Forms. It seems the forms combined with windows are created and rendered slower.
Is there any trick to avoid this? Right now I use hide() instead of close() so the second opening it is very fast, because all is rendered already. But the first opening, when the elements are not created yet, that is slow.
So in Ext 4 can we expect on faster rendering?

Thanks for your answer.

Condor
13 Jan 2011, 12:39 AM
Some things you can do to make your Ext 3 app faster:
1. Avoid overnesting.
2. Don't use a doctype (makes IE 6 and 7 a lot faster).

lakilevi
13 Jan 2011, 12:42 AM
Thanks.

I don't use any doctype. I have this in the beginning of page:


<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"/>


What do you mean exaclty by the "overnesting"?

Condor
13 Jan 2011, 1:10 AM
Overnesting is using additional containers that are not really needed to layout components properly.

Can you post your window config? Maybe I can give some pointers...

lakilevi
13 Jan 2011, 1:20 AM
Yes, sure.
Here is my typical structure:



function get_form_panel()
{
category_combo_store.load();
var form_panel = new Ext.form.FormPanel({
border:false,
hideLabels:true,
border:false,
url:'',
items:[{ // tabpanel
xtype:'tabpanel',
activeTab:0,
anchor:'100% 100%',
enableTabScroll: true,
deferredRender:false,
border:false,
bodyStyle:'padding:10px',
items:[{ // tabs
title:'<?=$lang->trans("General information")?>',
layout:'form',
labelAlign: 'top',
border:false, autoScroll:true,
items: [{
layout:'column',anchor:'100%',
border:false,
items:[{
columnWidth:.55, layout:'form', border:false,bodyStyle: "padding-right:10px",
items: [{xtype:'textfield', fieldLabel: '<?=$lang->trans("News title")?>', name: 'news_title', anchor:'100%',allowBlank:false}]
},{
columnWidth:.3,layout: 'form',border:false,bodyStyle: "padding-right:10px",
items: new bmedia.ComboBox({width:150,displayField:'name',valueField:'cat_id',name:'cat_id',store: category_combo_store,fieldLabel:'<?=$lang->trans("Category")?>', emptyText:'<?=$lang->trans("Select one")?>', allowBlank:false, anchor:'100%'})
},{
columnWidth:.15,layout: 'form',border:false,
items: new bmedia.ComboBox({width:100,displayField:'status',valueField:'value',name:'news_status',store: status_store,fieldLabel:'<?=$lang->trans("Status")?>', anchor:'100%'})
}]
},{
xtype:'htmleditor',fieldLabel:'<?=$lang->trans("News body")?>', anchor:'100% 83%',activate:true, name: 'news_body'
}]
},{
title:'<?=$lang->trans("Additional information")?>',
layout:'form',
labelAlign: 'top',
items:[{
layout:'column',anchor:'100%',
border:false,
items:[{
columnWidth:.25, layout:'form', border:false,bodyStyle: "padding-right:10px",
items: [{xtype:'datefield', fieldLabel:'<?=$lang->trans("News date")?>', name:'news_ts', format:'<?=$settings->get("date_format","")?>', allowBlank:false, anchor:'100%'}]
},{
columnWidth:.25,layout: 'form',border:false,bodyStyle: "padding-right:10px",
items: new bmedia.ComboBox({displayField:'name',valueField:'value',name:'hot_news',store: yesno_store,fieldLabel:'<?=$lang->trans("Is hot news")?>', anchor:'100%'})
}]
},{
xtype:'textarea', fieldLabel:'<?=$lang->trans("News short body")?>', name:'news_short_body', width:'100%', height:200
},{ // hidden fields
xtype:'hidden', name:'lang_id'
}]
},{
title:'<?=$lang->trans("SEO")?>',
layout:'form', labelAlign: 'top',
defaults:{xtype:'textarea'},
items:[{ // fields
fieldLabel:'<?=$lang->trans("Meta keywords")?>',
name:'module_meta_keyword', width:'100%', height:70
},{ // fields
fieldLabel:'<?=$lang->trans("Meta description")?>',
name:'module_meta_description', width:'100%', height:160
},{ // fields
fieldLabel:'<?=$lang->trans("Tags")?>',
name:'common_module_keywords', width:'100%', height:70
}]
}]
}]
});

return {'formpanel':form_panel};
}
/*edit panel for grid */
function edit_grid_item()
{
var selection=sm.getSelections();

var grid_formpanel = get_form_panel();
var edit_grid_item_form = grid_formpanel.formpanel;



var win = new Ext.Window({
title:'<?=$lang->trans("Edit news")?>',
tools:[{id:'help'}],
width:620,
height:570,
layout:'fit',
border:true,
items:[edit_grid_item_form],
buttons:[{
text:'<?=$lang->trans("Save")?>',
handler: function(){
//do the submit
}
},{
text:'<?=$lang->trans("Cancel")?>',handler:function(){win.close()}
}],
listeners:{
render:function(w){ insertTooltip(w.tools.help,'<?=$lang->autoHelp("news_edit_help",$my_js_module_name)?>'); },
hide:function(w){ closeTooltip(w.tools.help); },
show:function(){

/* here I isnert some dynamic fields from database if they exist */

Ext.Ajax.request({
url: 'modules/settings/jax_customfields/customfields_list.jax.php',
method:'post',
params: {'module_name':'news', 'multilang':GlobalLangId},
success:function (response,o){
var resp = Ext.util.JSON.decode(response.responseText);
if (resp.total > 0)
{
var additional_tab = new Ext.Panel({
title:'<?=$lang->trans("Other information")?>',
layout:'form', labelAlign: 'left', border:false, autoScroll:true
});
edit_grid_item_form.items.items[0].add(additional_tab);

for(var i=0;i < resp.rows.length;i++){
if (resp.rows[i].field_list.length > 0)
{
var created_fieldset=create_custom_fieldset(resp.rows[i],lang_handler)
additional_tab.add(created_fieldset);
}
}
edit_grid_item_form.doLayout();
}
}
});
}}
});
win.show();
}



It contains also some defined php objects, but I am sure that does not make problems in understanding the code.

Thank you very much for your time.

Condor
13 Jan 2011, 1:51 AM
1. Make your formpanel layout:'fit' (it's faster than layout:'form').
2. Use xtype:'container' when you don't need a panel (tabs, column container, columns).

Another advantage you will have when upgrading to Ext 4 is that you no longer need a layout:'form' container for a field to show a fieldLabel.

lakilevi
13 Jan 2011, 2:07 AM
Thank you very much for your tips.
I tried them, and it is at least 0.5-1 sec faster.
I would undertsand this container xtype... What is the diference between this and the Panel? When should I use the xtype:'container' and when not?

Condor
13 Jan 2011, 5:17 AM
Panel is a Container that adds title, tbar, bbar and tbar sections. If you're not using any of these then you should use a Container.

lakilevi
13 Jan 2011, 5:18 AM
Cool, thank you very much! I understand now.