JsonStore/GridPanel eats cpu
Hi,
I'm currently working on a fairly basic GridPanel which gets its data from a JsonStore. When I was testing it locally it worked like a charm, but when I uploaded it to our test server Firefox suddenly shot to 50% cpu usage and just hung as soon as I tried to use the scrollbar in the GridPanel. There is also a noticeable increase in the cpu usage (~20-30 %) if I just move the mouse over the grid. I have tried to reduce the number of records to around 20 but it is still noticeably slow. The initial dataset was 120 records which in imho is not very large. I tried reducing the number of columns with the initial dataset, but to no avail. I have also tried to create a version with Livegrid and a BufferView, but it still hangs.
I was therefore wondering if any of you experienced and wise persons out there could take a quick look at the relevant code and give me any pointers? I am at a complete loss here :)
Initial version
Code:
var store = new Ext.data.JsonStore({
root : 'staff',
totalProperty : 'results',
idProperty : 'username',
//remoteSort : true,
storeId : 'staffstore',
autoLoad : true,
autoDestroy : true,
fields: [
{name:'username', type:'string'},
{name:'name', type:'string'},
{name:'role', type:'string'},
{name:'email', type:'string'},
{name:'phone', type:'string'},
{name:'picture_url', type:'string'},
{name:'orgunit', type:'string'}
],
proxy: new Ext.data.HttpProxy ({
url: '/*********/json',
})
});
var sm = new Ext.grid.CheckboxSelectionModel();
var staffGrid = new Ext.grid.GridPanel({
store : store,
sm : sm,
//disableSelection:true,
//width :800,
//autoHeight : true,
height: 600,
frame :false,
columnLines : false,
renderTo : 'stafflist',
loadMask : {msg:"Laster..."},
cm: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
sm,
{header: "", dataIndex: 'picture_url' , renderer: renderImage, width: 55},
{header: "Name", dataIndex: 'name', id:'name', width: 100 },
{header: "Role", dataIndex: 'role', width: 100},
{header: "Email", dataIndex: 'email', width: 100},
{header: "Phone", dataIndex: 'phone', width: 100},
{header: "Org. unit", dataIndex: 'orgunit', width: 50},
],
bbar: new Ext.PagingToolbar({
store: store,
pageSize:20,
displayInfo:true
}),
view: new Ext.ux.grid.BufferView({
// custom row height
rowHeight: 34,
// render rows as they come into viewable area.
scrollDelay: false
})
}),
viewConfig: {
forceFit:true
}
});
The JSON file looks like this (shortened for brevity and anonymized):
Code:
{
"results" : "121",
"staff": [
{
"name": "xNet orcladmin Administrator",
"username": "someusername",
"role" : "System development",
"email": "adsf@asdf.com",
"phone": "*********",
"picture_url": "*******/profile.gif",
"orgunit": "Executive Group",
"p_doc_id": "2937"
},
{
"name": "John Doe",
"username": "jdoe",
"role" : "Arrangementssjef",
"email": "john@doe.com",
"phone": "**********",
"picture_url": "http://******/jdoe.jpg",
"orgunit": "",
"p_doc_id": "4596"
}
]
}
My Livegrid code looks like this (basically just adapted from the demo code on the homepage):
Code:
var sm = new Ext.grid.CheckboxSelectionModel();
var myView = new Ext.ux.grid.livegrid.GridView({
nearLimit : 20,
loadMask : {
msg : 'Buffering. Please wait...'
}
});
var livegrid = new Ext.ux.grid.livegrid.GridPanel({
enableDragDrop : false,
cm : new Ext.grid.ColumnModel([
sm,
{header: "", dataIndex: 'picture_url', renderer: renderImage, width: 55},
{header: "Name", dataIndex: 'name', id:'name', width: 100 },
{header: "Role", dataIndex: 'role', width: 100},
{header: "Email", dataIndex: 'email', width: 100},
{header: "Phone", dataIndex: 'phone', width: 100},
{header: "Org.unit", dataIndex: 'orgunit', width: 100}
]),
loadMask : {
msg : 'Loading...'
},
//title : 'Large table',
height :600,
store : new Ext.ux.grid.livegrid.Store({
autoLoad : true,
url: '/*******/json',
bufferSize : 20,
reader : new Ext.ux.grid.livegrid.JsonReader({
root : 'staff',
totalProperty : 'results',
id : 'username'
},[ {name:'username', type:'string'},
{name:'name', type:'string'},
{name:'role', type:'string'},
{name:'email', type:'string'},
{name:'phone', type:'string'},
{name:'picture_url', type:'string'},
{name:'orgunit', type:'string'}
])
}),
selModel : sm,
//view : myView,
bbar : new Ext.ux.grid.livegrid.Toolbar({
view : myView,
displayInfo : true
}),
renderTo: 'stafflist'
});
console.log(livegrid);
livegrid.render('viewport');
The renderImage function is defined and works but returning an <img> tag with the relevant path :)
Any help is very very appreciated!
Håvard
