PDA

View Full Version : Sencha Touch 2.1 Charts crash on Memory Leak on iPad and Android



vikramiyer
10 Dec 2012, 11:19 PM
Hi,

Charting components fetches content via Ext.Ajax clears the store used for displaying the charts and assigns new data to the store for new values selected. However the chart is crashing after a couple of times. iPad log reveals low memory. I guess its a memory leak in the charting component or an improper way of clearing store data. Here is my code below.


Controller



var userdetails = new Array();
userdetails.push({Key: ''+localStorage.getItem('Id'});

Ext.Ajax.request({
url: URL,
params: JSON.stringify(userdetails),
headers: {
"Authorization": localStorage.getItem("BasicAuthenticationHeader")
},
callback:function(options, success, response) {
if(response.statusText == "Success"){
var data = Ext.JSON.decode(response.responseText);

var myStore = Ext.getStore("MyStore");
myStore.removeAll();

for(var i=0, length = data.dummy.length;i< length; i++){
var data= {};
data.name = data.dummy[i].Day;
data.data1 = data.dummy[i].Time;
data.data2 = data.dummy[i].Value;
myStore.add(data);
}

Ext.getStore('MyStore').sync();
Ext.Viewport.setMasked(false);
}
}
});

delete userdetails;
}

.......


Ext.define('Namespace.view.MyChart', {
extend: 'Ext.Panel',
requires: ['Ext.chart.Chart','Ext.chart.series.Line','Ext.chart.axis.Numeric','Ext.chart.axis.Category','Ext.TitleBar','Ext.picker.Picker'],
xtype: 'chartpanel',

config: {
cls: 'card1',
layout: 'fit',
title: 'MyChart',
iconCls: 'time',

items: [
{

xtype: 'chart',
store: 'MyStore',
series: [{
type: 'line',
xField: 'name',
yField: 'data1',
style: {
stroke: Namespace.view.ColorPatterns.getBaseColors(1),
fillOpacity: 0.6,
miterLimit: 4,
lineCap: 'miter',
lineWidth: 2
},
marker: {
type: 'circle',
size: 3,
radius: 3,
'stroke-width': 3
}
},{
type: 'line',
xField: 'name',
yField: 'data2',
style: {
fill: Namespace.view.ColorPatterns.getBaseColors(0),
stroke: Namespace.view.ColorPatterns.getBaseColors(0),
fillOpacity: 0.5,
miterLimit: 3,
lineCap: 'miter',
lineWidth: 2
},
marker: {
type: 'circle',
size: 3,
radius: 3,
'stroke-width': 2
}
}],
axes: [{
type: 'numeric',
position: 'left',
fields: ['data1','data2'],
title: {
text: 'Day',
fontSize: 20
}

},{
type: 'category',
position: 'bottom',
fields: ['name'],
title: {
text:'Time',
fontSize: 20
}

}]
},
{
xtype: 'picker',

id: 'chartPicker',
useTitles: true,
slots: [
{
name: 'chart',
xtype: 'pickerslot',
title: 'Select Day',
store: 'SlotStore'
}
]
}]
},
initialize: function() {
this.callParent(arguments);
}
});



Please let me know if removeAll() on store is sufficient to clear memory that is used for the chart. Or where is the memory leak happening? Why is the chart crashing on clicking the picker for another value?

mitchellsimoens
12 Dec 2012, 1:59 PM
store.removeAll should clear everything and the chart should clean up from it. There may be memory leaks somewhere. One question I have is why not let the store use a proxy to load data instead of using Ext.Ajax?

vikramiyer
13 Dec 2012, 12:44 AM
The reason why I used Ext.Ajax is two parts... One is, all the business logic will be stored in the controller,so that business logic changes can be done in one place. Second is that I wasn't sure of the header tags in the proxy... I need to pass additional Authentication headers and mime types... I didn't know the syntax for that using proxy.