Panel destroy, DOM leak?

[maddhippy]

Hi,
I'm relatively new here, so bare with me.
I am creating an app and have started focusing on performance by only creating DOM elements when a card is shown and deleting the DOM elements when the card is hidden. When doing some memory profiling, I noticed that each remove() left some detached DOM elements, which I understood to be a DOM leak.

For instance if I create a basic app that does:


new Ext.Application({ name: 'myApp',
launch: function() {
var t=new Ext.Panel({fullscreen: true});
for(var i=0;i<100;i++){
t.add({xtype: 'panel',html:'panel #'+i});
t.doLayout();
t.remove(0,true);
}
}
});


When I run this, I get 102 detatched DOM elements(according to Chrome Profiles).

Am I misunderstanding something basic here?

[maddhippy]

Ok, I'll take a stab at answering my own question. If anybody has any thoughts on whether or not I'm right, the advice would be greatly appreciated.

According to this: http://code.google.com/apis/v8/design.html, Chrome attaches some sort of hidden class for faster access to blocks of javascript. This seems to be staying attached to my created objects, this not letting the DOM elements be fully deleted when I destroy a object.

So, for now this is a Chrome V8 issue and seems to leave detached DOM elements in memory. Yay, Chrome.... :s