ExtJS4 memory leak
I have an application written in ExtJS 4.1.1 that uses one store a lot. I get sample data from the server, and after some validation, I add it to the store using its "add" method. I do this periodically and I delete entries that I also don't need from the store.
The problem is that my application is consuming more and more RAM over time and it seems that I have found the source of the problem, but I do not know how to deal with it.
Here is the definition of my store:
this.store = Ext.create('Ext.data.Store', {
fields: ['when', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data8', 'data9'],
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users'
}
},
sorters: [{
property: 'when',
direction: 'ASC'
}]
});
And this is how I remove entries from it:
var record = self.store.getAt(j);
if((record.get('when') <= newMinDate) && (record.get('data'+id) !==' ')) {
self.store.remove(record);
record.destroy();
record = null;
j--;
ln--;
}
But when I checked the console, when I debugged this issue, I could see that the entries were actually removed from storage, but not from memory.
EDIT / UPDATE: I tried to fix the problem using the advice in your answers, but none of them were able to fix it. Obviously I understood the source of the problem correctly, I pulled out my store's code to study it more closely and see if it actually causes the problem. You can see all the code below:
Ext.define('TestApp.App', {
extend: 'Ext.app.Application'
});
Ext.application({
extend: 'MyApp.app.Application',
store: null,
launch: function() {
var self = this;
self.store = Ext.create('Ext.data.Store', {
fields: ['when', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data8', 'data9'],
proxy: {
type: 'memory'
},
sorters: [{
property: 'when',
direction: 'ASC'
}]
});
self.beginTask();
},
beginTask: function() {
var self = this;
Ext.TaskManager.start({
run: function() {
var jsonRaw = *very large json*; //about 650 samples
var json = Ext.JSON.decode(jsonRaw, true);
// self.store.add(json.data.samples);
// var ln = self.store.getCount();
// for (var j=0; j<ln; j++) {
// var record = self.store.getAt(j);
// self.store.remove(self.store.getAt(j));
// j--;
// ln--;
// record.destroy();
// delete record;
// }
json = null;
jsonRaw = null;
},
interval: 1000
});
}
});
Now for the weird part about this: the memory leak is present even though the store part is commented out like in the code above. Did I make a mistake while managing tasks?
source to share
One of the many errors I've encountered with Ext JS is that Ext.data.Model#destroy
it doesn't actually clear the entry locally. The method destroy
uses the storage proxy to send a destroy request for this record (if you need to, for example, delete the corresponding record from the database). If this is your intentional behavior, then don't worry.
When you delete an entry from the store, this store stores a link to that entry in an array named removed
. You can see it at the bottom of the Ext.data.Store # remove method . I recommend using a JavaScript debugger and checking your storage object after multiple deletions to see if your entries are being cached. If so, simply calling is sufficient store.removed.length = 0;
to clear it.
source to share
What happens if you follow the store.sync()
uninstallation? Don't know if this helps the memory proxy, but it should remove links to deleted entries I guess. Just a record remove(record)
in a record doesn't delete the record, it just marks it for deletion and stops revealing it as available in the store. At least this is true for other types of proxies. The actual deletion can only be done after the saved record changes (add, delete, update) have been synchronized via store.sync();
. This is when the store stores records in their new state in its internal list.
Perhaps sra is right and you yourself keep the entry reference in the closure somewhere else?
source to share