View Full Version : [CLOSED] [] Memory Leak in rendering Ext.grid.Panel

2 Dec 2013, 4:17 PM
Ext version tested:


Chrome 31.0.1650.57 m

Memory leak in Ext.grid.Panel
Steps to reproduce the problem:

Create and destroy a grid panel repeatedly.
The result that was expected:

No growth in memory
The result that occurs instead:

Growth in memory.
Ext.dd.DragDropManager.ids grows indefinitely
Test Case:

var grid;

var repeater = function() {
if( grid == null ) {
grid = Ext.create('Ext.grid.Panel', {
title: 'Grid',
columns: [
{ text: 'Name', dataIndex: 'name' }
height: 100,
width: 100,
renderTo: Ext.getBody()
else {
grid = null;
console.log( "Drag drop Manager ids: ", Ext.Object.getSize( Ext.dd.DragDropManager.ids ) );

Ext.defer( repeater, 500 );


2 Dec 2013, 5:11 PM
This issue is already resolved in 4.2.2. Thanks for the test case.

3 Dec 2013, 8:41 AM
Thanks evant. Unfortunately we can't move on to 4.2.2 just yet. Is this an acceptable workaround for 4.2.0?

Ext.override( Ext.dd.DragDropManager, {
_remove: function(oDD) {
for (var g in oDD.groups) {
if (g && this.ids[g] && this.ids[g][oDD.id]) {
delete this.ids[g][oDD.id];
//Added in this check to remove the entire group if it is empty
if( Ext.Object.getSize( this.ids[g] ) == 0 ) {
delete this.ids[g];

delete this.handleIds[oDD.id];

3 Dec 2013, 10:07 AM
Yeah, the fix we have in the core looks fairly similar to that,

6 Dec 2013, 3:26 AM
Hi Evan,
We are facing the same memory leak issue in normal grid. We are using ExtJS 4.2.1. My Test Case is, The grid is getting to loaded to the screen when the page is opened, Then on every refresh, the browser memory is increasing more and more. Can you please tell us when the ExtJS 4.2.2 version is going to release....


9 Dec 2013, 1:26 PM
When you say refresh do you mean refreshing the webpage or the grid? What browser are you using?

9 Dec 2013, 11:56 PM
Hi wsi,
There is a button on the screen which is only refreshing the data of the grid or you can say reloading the data. In that case the memory increasing and increasing.


10 Dec 2013, 8:10 AM
My memory seems to be stable. I see the memory usage go up to about 400M before garbage collection runs and brings the memory back down to around 150M (this is in Chrome version 31.0.1650.63). The code I tested is the following:

var store = Ext.create( "Ext.data.Store", {
proxy: "memory",
fields: [ "name", "value" ],
data: []

var refreshButton = Ext.create( "Ext.button.Button", {
text: "Refresh",
handler: function() {
var data = [];

for( var i = 0; i < 500; ++i ) {
data.push( { name: "a", value: Math.random() } );

store.loadData( data );

Ext.defer( function() {
refreshButton.handler.call(refreshButton.scope, refreshButton, Ext.EventObject)
}, 100 );

var grid = Ext.create( "Ext.grid.Panel", {
height: 500,
width: 500,
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Value', dataIndex: 'value' }
store: store,
tbar: [
renderTo: Ext.getBody()

10 Dec 2013, 11:09 PM
Hi wsi, The only difference in my code and your code is proxy : 'memory' and you are loading data later, Is that the reason for memory leak. For the time we are trying a different approach as we are handling a large mass of data. If we will fail in our approach we will must try your way and update you here. Thanks for sharing your code....