Grid Leaks Memory
Posted in xn--kfs74mzzid01b.com edit by webmaster on January 7th, 2009
Is there a way to to completely remove the old grid from memory?
When I examine the DOM using firebug I notice that ExtJS create div element with names like "ext-gen57" (and classname: "x-dd-drag-proxy x-dd-drop-nodrop"), maybe its those div elements that cause the leak.
Also in IE7 the grid fails to be rendered after the grid has been replace 27 times and the grid area is empty. In Firefox the grid is rendered properly.
1) have the grid destroy function remove the styles (limiting IE to 30 grids at any given time). Would probably be good to prevent infinit unused styles from loading in FF too.
2) dig through the code and use tag embedded styles to achieve the same purpose there for removing the need for style tags. (best solution)
I have higher priorities at the moment, so I will revisit this afterwords (hopefully a few days). In the meantime if anyone else wants to do this please, please, please post your work.
Good luck.
I think ext is an excellent framework and there should be a solution for this problem, i particular as the grid is one of the most used component in ext and internet explorer users are also not rare.
So the question is, should the problem be solved in the ext-library itself. A workaround-solution would be nice as fast help, but i think in the 1.1 Release (1.1 is still beta)) this problem should also be solved.
I suppose we have to find a way to delete them.
Ext.util.CSS.createStyleSheet=function(cssText){
varss;
vardoc=document;
if(Ext.isIE){
//ss = doc.createStyleSheet();
//ss.cssText = cssText;
ss=document.createElement("style");
ss.setAttribute("type","text/css");
ss.styleSheet.cssText=cssText;
document.getElementsByTagName("head")[0].appendChild(ss);
}else{
varhead=doc.getElementsByTagName("head")[0];
varrules=doc.createElement("style");
rules.setAttribute("type","text/css");
try{
rules.appendChild(doc.createTextNode(cssText));
}catch(e){
rules.cssText=cssText;
}
head.appendChild(rules);
ss=rules.styleSheet?rules.styleSheet:(rules.sheet doc.styleSheets[doc.styleSheets.length-1]);
}
this.cacheStyleSheet(ss);
returnss;
}
d'oh! =D>
I added an id argument to createStylesheet and did it in there. :)
becouse to me dont work... :((
This particular problem should be corrected in SVN.
EDIT: don't forget, this still limits you to 30 grids (assuming no other styles tags are loaded in the header) at any given time.
tnks
var rulesId = this.grid.id + '-cssrules';
Ext.util.CSS.removeStyleSheet(rulesId);
to destroy takes care of it.
Ext.grid.GridView.prototype.destroy=function(){
var rulesId = this.grid.id + '-cssrules';
Ext.util.CSS.removeStyleSheet(rulesId);
if(this.colMenu){
this.colMenu.removeAll();
Ext.menu.MenuMgr.unregister(this.colMenu);
this.colMenu.getEl().remove();
delete this.colMenu;
}
if(this.hmenu){
this.hmenu.removeAll();
Ext.menu.MenuMgr.unregister(this.hmenu);
this.hmenu.getEl().remove();
delete this.hmenu;
}
if(this.grid.enableColumnMove){
var dds = Ext.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
if(dds){
for(var dd in dds){
if(!dds[dd].config.isTarget && dds[dd].dragElId){
var elid = dds[dd].dragElId;
dds[dd].unreg();
Ext.get(elid).remove();
} else if(dds[dd].config.isTarget){
dds[dd].proxyTop.remove();
dds[dd].proxyBottom.remove();
dds[dd].unreg();
}
if(Ext.dd.DDM.locationCache[dd]){
delete Ext.dd.DDM.locationCache[dd];
}
}
delete Ext.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
}
}
this.bind(null, null);
Ext.EventManager.removeResizeListener(this.onWindo wResize, this);
}
Are you actually cleaning it up? You will need to do some work to clean things up (e.g. destroying the grid, removing the container element and creating a new one).
grid.render();
grid.destroy(true);
is there something else?
How can you clean up more?
BTW in IE7 grid fail to render more than 27 grids on one page. In Firefox and Opera you can render more.
I agree completely. It sounds like there are going to be quite a few changes in 2.0, so for larger applications that use 1.x, it would be quite a bit of work to upgrade, change the code and test. I'd be pretty disappointed if we have to upgrade from 1.x to 2.x just for bug fixes. I think basic bug fixes should be included in 1.x at least for a while after 2.x is released.
Put it this way. If Microsoft told everyone that there would be no more updates to Windows XP the minute Windows Vista was released, would you be happy?
I'd like to know what the official stance is from the Ext Team on this subject.
We will be releasing 1.1 Beta 2 on or before Friday. It will have the fix.
That's what i call good news! =D>
Thanks Jack. I can't say it often enough, ext is an excellent framwork.
if (Ext.isIE) {
ss = doc.createStyleSheet();
ss.cssText = cssText;
}
As http://support.microsoft.com/kb/262161/en-us points out, there is a limit of 30 style tags for one page.
Nice find! In Ext 2.0's GridView3 this isn't an issue as it no longer generates a stylesheet.
The problem is in the createStyleSheet() function, which creates stylesheets on the fly
if (Ext.isIE) {
ss = doc.createStyleSheet();
ss.cssText = cssText;
}
As http://support.microsoft.com/kb/262161/en-us points out, there is a limit of 30 style tags for one page.
If you use the .destroy() on the grid then lost div tags are cleaned up, but memory is still leaked.
And the grid widget fails to draw anything after 27 times (in IE7).
widgetsgridAbstractGridView.js(94): return Ext.util.CSS.createStyleSheet(ruleBuf.join(""));
widgetsgridGridView.js(609): return Ext.util.CSS.createStyleSheet(ruleBuf.join(""));
Probably should remove this function for 2.0 so nothing else ends up using it.
Is there a work around for us 1.1 users? Is svn 2.0 stable yet?
http://extjs.com/forum/showthread.php?t=875
Ext
.util.CSS.createStyleSheet=function(cssText){
var ss;
var doc=document;
var head=doc.getElementsByTagName("head")[0];
var rules=doc.createElement("style");
rules.setAttribute("type","text/css");
if(Ext.isIE){
//ss = doc.createStyleSheet();
//ss.cssText = cssText;
rules.styleSheet.cssText=cssText;
}else{
try{
rules.appendChild(doc.createTextNode(cssText));
}catch(e){
rules.cssText=cssText;
}
}
head.appendChild(rules);
ss=rules.styleSheet?rules.styleSheet:(rules.sheet doc.styleSheets[doc.styleSheets.length-1]);
this.cacheStyleSheet(ss);
return ss;
}
Is the clean up code running? If so, what do I need to do to ensure that it is called. Currently my grids are inside tabs, so when I destroy the tab they go with it. This probably does not cut it.
In short if we start removing these styles when grids are destroyed, then we can keep creating more grids. However, with the current rules technique IE will limit us to 30 grids, or less if we have other style tags loaded in the header.
That is a start.
Edit: fixed some spacing up above...could easly add rules.setAttribute("id", "grid-css-#"); for removal process. I still do not know enough about what is going on.
will be moving a little off-topic though... suggested this before in this thread (http://extjs.com/forum/showthread.php?t=5328&highlight=style), that the createStyleSheet() method should assign Ext.id()s to the