PDA

View Full Version : Grid of ExtJS4 ==> Possible memory leaks or misuse



franklin.tong
1 Aug 2011, 2:47 AM
I did some test on grid component of ExtJS4, and observed the memory occupancy keeping raising while doing sorting. Most of the occupied memory cannot be reclaimed even I have minimized the browser window.

I do hope there is a misuse, but not memory.

Could anyone give me any tips to solve it?

OS info: windows7 professional
Browser info: chrome 14.0.825.0/ firefox 3.6.18/ IE 8.0.7600.16385
Hardware: 4GMEM?i5 650

The code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ExtGrid demo</title>
<link rel='stylesheet' text='text/css' href='css/ext-all-debug.css'/>
<script type='text/javascript' src='js/ext-all-debug.js'></script>
</head>
<body>
<div id='timeelapsed'></div>
<script type='text/javascript'>
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'js/ux');

Ext.require(['Ext.ux.data.PagingMemoryProxy']);

Ext.onReady(function() {
var startTime = new Date();
var localData = [
// 3000 rows
];

var store = Ext.create('Ext.data.ArrayStore', {
pageSize: 10,
fields: [
{name:'id',type:"int"},
{name:'invdate',type:"date", dateFormat: 'Y-n-j'},
{name:'name'},
{name:'note'},
{name:'amount',type:"float"},
{name:'tax',type:"float"},
{name:'total',type:"float"}
],
remoteSort: true,
proxy: {
type: 'pagingmemory',
data: localData,
reader: {
type: 'array'
}
}
});

Ext.create('Ext.grid.Panel', {
store: store,
multiSelect: true,
columns: [{
text: 'Inv No',
dataIndex: 'id'
},{
text: 'Date',
dataIndex: 'invdate',
renderer: Ext.util.Format.dateRenderer('Y-n-j')
},{
text: 'Client',
dataIndex: 'name'
},{
text: 'Amount',
dataIndex: 'amount'
},{
text: 'Tax',
dataIndex: 'tax'
},{
text: 'Total',
dataIndex: 'total'
},{
text: 'Notes',
dataIndex: 'note',
sortable: false
}
],
height: 300,
width: 800,
collapsible: true,
title: 'Manipulating Array Data',
renderTo: Ext.getBody(),
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 10,
store: store,
displayInfo: true
}),
listeners: {
afterrender: function() {
var endTime = new Date();
Ext.get('timeelapsed').dom.innerHTML = 'start ==> ' + startTime + ', end ==> ' + endTime;
}
}
});

store.load();
});
</script>
</body>
</html>

SebTardif
1 Aug 2011, 11:52 AM
Some debugger accumulate all the data like Firebug, maybe you have the issue only under debugging?

franklin.tong
1 Aug 2011, 7:40 PM
Thanks SebTardif.

Debugger is not present.

I'll try version 4.0.2a, and update the test result if any differences found.

franklin.tong
2 Aug 2011, 4:29 PM
Tested on version 4.0.2a, with chrome 14.xxxx. Problem still exists.

I've snapped the screenshot, but I could not attach the pics. :(