PDA

View Full Version : [3.2.1]Grid Store Reload causes memory usage to grow in IE



geese0090
14 Jul 2010, 11:20 AM
Hello Friends,

I am creating an application for a client using ExtJS 3.2.1 Grid component. One of the requirement of the application is that grid must refresh its data every 10 seconds or so automatically, to display updated information to the end user. Also as per client requirement, Internet Explorer must be used.

However every call to the store.reload() method increases the total memory consumed by the browser. This happens even when the records from the server side are still the same as last reload.

I am not sure if I am not using the ExtJS correctly or maybe there is a bug? If someone can look at the sample I posted and tell me if I am doing something wrong or if there is a better way to implement this functionality, I will really appreciate it.

gridtest.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Stations</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<style type='text/css'>
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}

.x-grid3-body .x-grid3-td-alias {
background-color:#f4f1f4;
}
</style>
<script language="javascript" type="text/javascript">

function editStation(id) {
alert('this will show a form to edit station #' + id);
}

function delStation(id) {
alert('this will delete station #' + id);
}

function renderTools(value, p, record) {
return String.format('<a href="#" title="Delete Station" onClick="delStation({0})">Delete</a>&nbsp;<a href="#" title="Edit Station" onClick="editStation({0})">Edit</a>', record.id);
//return '&nbsp;';
}

function refreshGrid() {
var gs = Ext.getCmp('sgrid').getStore();
gs.reload();
setTimeout('refreshGrid()', 10000);
}

Ext.onReady(function(){
Ext.QuickTips.init();

var store = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: 'server.html'
}),
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'totalCount',
id: 'station_id',
fields: [
{name: 'station_name', type: 'string'},
'ipaddress',
'status',
'station_description',
'script_count'
]
})
});

var stationgrid = new Ext.grid.GridPanel({
el:'station-grid',
id:'sgrid',
width:700,
height:600,
stripeRows:true,
store: store,
autoScroll:true,
cm: new Ext.grid.ColumnModel([
{
header: "Actions",
dataIndex: 'id',
width: 130,
sortable:false,
align:'center',
renderer: renderTools
},{
id: "alias",
header: "Station Name",
sortable:true,
dataIndex: 'station_name',
width: 190
},{
header: "IP / Hostname",
dataIndex: 'ipaddress',
sortable:true,
width: 150
},{
header: "Status",
dataIndex: 'status',
sortable:true,
width: 150
},{
header: "# of Scenarios",
dataIndex: 'script_count',
sortable:true,
width: 90
},{
header: "Description",
dataIndex: 'station_description',
sortable:true,
width: 400
}
]),
border:false,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
loadMask: true,
viewConfig: {
autoFill:true,
forceFit:true
}
});

var viewport = new Ext.Viewport({
layout:'border',
autoScroll:true,
border:false,
items:[{
xtype:'panel',
border:false,
layout:'fit',
region:'center',
margins:'0 0 0 0',
items:stationgrid
}]
});

setTimeout('refreshGrid()', 10000);
});

</script>

</HEAD>
<BODY>
<div id="station-grid" style="overflow:auto;"></div>
</BODY>
</HTML>server.html


{"totalCount":2,"data":[{"station_id":"1","station_name":"local","ipaddress":"10.0.0.38","status":"OK","station_description":"Local Station","script_count":"5"},{"station_id":"2","station_name":"remote","ipaddress":"10.0.0.210","status":"WARNING","station_description":"This is a test","script_count":null}]}Thanks a lot in advance!!

Vaevictus
27 Jul 2010, 12:40 PM
bump, I experienced this a over a year ago on another project, would like to know if it's extjs or IE to blame.

fay
28 Jul 2010, 1:20 AM
See the 2nd response ("store.reload() and memory leak") in the "Similar Threads" below for an explanation.