PDA

View Full Version : 4.0.7 - strange 500kb memory leaks with components



timTaylor
3 Jan 2013, 6:27 AM
hi there,
inspecting my testapplication with google chrome, i've found out, every time i add some panels or forms to a window and remove them later with myWin.removeAll() something stays in memory but I can't figure it out.

the syntax I am creating the components:



var borderPanel = Ext.create('Ext.panel.Panel', {
id :"borderPanel ",
layout :'border',
items :[
{
id :'myMainPanel',
region:'north',
xtype :'panel',
height:100,
split :true,
border:false
// ...

var somePanel= Ext.create('Ext.grid.Panel',...

Ext.getCmp('myMainPanel').add(somePanel);

// leads to the fine working structure:
// borderPanel -> myMainPanel -> somePanel


is there a known bug or I'm doing something wrong with the components creation / nesting?

friend
3 Jan 2013, 12:51 PM
Off the top of my head:

1.) Avoid the use of hard coded IDs in your components. Instead consider using the down (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-down), up (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-up) and query (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-query) methods supported by Ext.panel.Panel (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel) to get a reference to a desired child component. You can do something like this to get a reference to the child panel that acts as the north region of your border layout:



var centerPanel = borderPanel.down('panel[region="north"]');


If you're constantly adding and removing components with the same IDs, it's possible that you're tripping up the browser's garbage collection.

2.) I noticed that you're using variable assignments (e.g., 'var somePanel') for your child panels. I can't help but wonder if some var is maintaining a reference to a panel object, even though myWin.removeAll() was called...

timTaylor
4 Jan 2013, 2:37 AM
Thanks for the answer!
I've rewritten the code and nothing has changed in behavior.

I've tried another test:
i know, ... still using id's ...
but: some parts of my panel's content are dynamically so I have no chance without id's :-(((

calling
Ext.getCmp('someTestPanel').show();
Ext.getCmp('someTestPanel').hide();

increases the size of the google chrome memory dump every time after switching. :((:((:((

timTaylor
7 Jan 2013, 6:30 AM
to break down the problem so far that it is reproducible for everyone, i set up a small example:




// ---- container with 2 panels + toolbar

var panel1Toolbar =
{
xtype :'toolbar',
itemId:'devTestPanel1toolbar',
items :[
{
text :'show panel #2',
handler:function ()
{
Ext.getCmp('devTestPanel2').show();
}
},
{
text :'hide panel #2',
handler:function ()
{
Ext.getCmp('devTestPanel2').hide();
}
}
]
};

var contentObj = {
layout:"auto",
title :"FitLayout Container",
items :[
{
xtype :"panel",
title :"Panel#1",
id :"devTestPanel1",
dockedItems:[ panel1Toolbar ],
width :200,
height :200
},
{
xtype :"panel",
title :"Panel#2",
id :"devTestPanel2",
hidden:true,
width :200,
height:200
}
]
};


// ---- the window
var window = Ext.create("Ext.window.Window",
{
width:200,
height:400
});

window.add(contentObj);
window.showAt(300);


at first run:
google chrome / profiles / heap snapshot is 8.91MB
now, clicking show/hide 10 times:
google chrome / profiles / heap snapshot is 9.02MB
clicking another 10 times:
google chrome / profiles / heap snapshot is 9.05MB

please help!!