PDA

View Full Version : Grid / Store sorting - slow performance



mpete
9 Nov 2012, 3:21 AM
Hi all !

I have a grid with 15 columns. The store reads data through an ajax call.
Up to 3000 records (rows) are returned. About 300KB of (json) data.

After everything has loaded, I want to click on a column to sort. Sorting a column client side now takes about 10 seconds..

I understand that implementing paging and/or serverside sorting is possible, but I'd like to prevent that if possible. I'd like to be able to load everything (up to 3000 records) and display it all in a grid + be able to sort it (and filter it..) client side.

I have the code, but it's not very fast right now..

So question is how (if possible) can I accomplish client side sorting of around 3000 records (rows) with around 15 columns faster..
I've experimented a bit with setting buffered:true on the store, but the I loose sorting..

Here's my code so far:



var grid = null;

Ext.onReady(function () {

// Set some variables
var limitGrid = 3000;
var gridLoadingText = "Loading tasks...";

Ext.QuickTips.init();

// Define the datamodel for Task
Ext.define('Task', {
extend : 'Ext.data.Model',

fields : [{
name : '$nummer'
}, {
name : '$oppgave'
}, {
name : '$status'
}, {
name : '$dato_reg',
type : 'date',
format : 'Y-m-d'
}, {
name : '$dato_ferdig',
type : 'date',
format : 'Y-m-d'
}, {
name : '$dato_start',
type : 'date',
format : 'Y-m-d'
}, {
name : '$prioritet'
}, {
name : '$bestiller'
}, {
name : '$ansvarlig'
}, {
name : '$leveranseansvarlig'
}, {
name : '$virksomhet'
}, {
name : '$virksomhetnr'
}, {
name : '$fagomrade'
}, {
name : '$dvhkey'
}, {
name : '$divisjon'
}, {
name : '$unid'
}
]
});

// Create the datastore
store = Ext.create('Ext.data.Store', {
model : 'Task',
sorters : {
property : '$dato_reg',
direction : 'DESC'
},
remoteSort : false,
proxy : {
type : 'ajax',
url : 'xRestService.xsp/Read?view=TasksREST&count=' + limitGrid,
reader : {
type : 'json',
root : 'items',
totalProperty : '@toplevelentries'
},
simpleSortMode : true
},
listeners : {
datachanged : onStoreSizeChange
}
});

// Update displayed count when store is filtered
function onStoreSizeChange() {
grid.down('#status').update({
count : store.getCount()
});
}

// Create group header
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl : '{name} ({rows.length} Task{[values.rows.length > 1 ? "r" : ""]})',
hideGroupedHeader : true
});

// Create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store : store,
columns : {
items : [{
text : 'Nr.',
widht : 40,
dataIndex : '$nummer'
}, {
text : 'Task',
sortable : true,
flex : 1,
dataIndex : '$oppgave'
}, {
text : 'Status',
flex : 0.5,
dataIndex : '$status'
}, {
xtype : 'datecolumn',
text : 'Registrert',
width : 120,
format : 'd.m.Y',
dataIndex : '$dato_reg'
}, {
xtype : 'datecolumn',
text : 'Ferdig',
width : 120,
format : 'd.m.Y',
dataIndex : '$dato_ferdig'
}, {
xtype : 'datecolumn',
text : 'Start',
width : 120,
format : 'd.m.Y',
dataIndex : '$dato_start'
}, {
text : 'Prioritet',
widht : 40,
dataIndex : '$prioritet'
}, {
text : 'Bestiller',
flex : 0.5,
dataIndex : '$bestiller'
}, {
text : 'Ansvarlig',
flex : 0.5,
dataIndex : '$ansvarlig'
}, {
text : 'Leveranseansvarlig',
flex : 0.5,
dataIndex : '$leveranseansvarlig'
}, {
text : 'Virksomhet',
flex : 0.5,
dataIndex : '$virksomhet'
}, {
text : 'Virksomhet nr',
widht : 40,
dataIndex : '$virksomhetnr'
}, {
text : 'Fagområde',
flex : 0.5,
dataIndex : '$fagomrade'
}, {
text : 'DVHKey',
widht : 40,
dataIndex : '$dvhkey'
}, {
text : 'Divisjon',
flex : 0.5,
dataIndex : '$divisjon'
}
],
},
dockedItems : [{
dock : 'top',
xtype : 'toolbar',
items : [{
iconCls : 'add',
text : 'New Task',
disabled : false,
handler : function () {
Ext.MessageBox.show({
title : 'Info',
msg : 'Scheduled for next version...',
buttons : Ext.MessageBox.OK,
icon : Ext.MessageBox.INFO
});
}
}, '->', {
xtype : 'component',
itemId : 'status',
tpl : 'Dsiplaying {count} tasks',
style : 'margin-right:5px'
}
]
}
],
title : "<img src='Logo.png'/>",
viewConfig : {
stripeRows : true,
loadingText : gridLoadingText
}
});

Ext.widget('viewport', {
layout : 'fit',
items : [grid]
});

// Store load
store.load({
params : {
start : 0,
limit : limitGrid
}
});
});


Any information / tips would be greatly appreciated !
Thanks a lot in advance !

regards,
Petter

mitchellsimoens
10 Nov 2012, 3:49 PM
You're loading 3,000 records in a non-buffered store? I'd expect anything to be slow.

mpete
12 Nov 2012, 12:13 AM
Hi Mitchell,

Yes, it's slow and I understand that I have to do something to make it perform faster. A buffering store might be the thing I'm looking for, but if I'm not mistaking, I then loose the ability to do client side sorting / filtering ? True ?

Any tips / links etc would be greatly appreciated :)

best regards,
Petter Kjeilen

mpete
19 Nov 2012, 6:35 AM
Question: Why does sorting 3000 (or even much more..) records clientside in a non-buffered store have to be slow ?

Take a look at this project -> https://github.com/mleibman/SlickGrid/wiki

Example -> http://mleibman.github.com/SlickGrid/examples/example4-model.html

Sorting (+ repainting) 50000 records clientside is done really quick.

Really interesting to know which sorting algorithm / mechanism is used when sorting in Ext.

Thanks !

regards,
Petter Kjeilen