View Full Version : Huge Grids: Paging and Grouping

31 Mar 2011, 1:23 AM
I have a web app which is a web interface for a desktop Reporting Program. A report is a grid... I'm using javascript methods with RPC Json and I'm working with local data. Reports are very complex, each of them takes 2 minutes to be executed on the server side. That's why I keep all the data in memory.

Many reports(grids) have more than 10,000 rows. For paging I'm using PagingArrayStore (if I used remote data every time when I want to change the page will take also 2 minutes = the time of my complex SQL to be executed). Without pagination all web browsers freeze facing with more than 10,000 rows (sometimes more than 100,000).

I also want to Group the rows (GroupingStore ?) but I do not know how to do it? Could I have pagination and grouping simultaneously?

What are yours suggestions?

31 Mar 2011, 4:56 AM
Sure you can! You can use the PagingGroupStore :)

Anyway, 10.000 records may be a bit too much to have it all client side. Try to use index in the DB to improve the queries and use remote paging

var adHocStore = new Ext.ux.data.PagingGroupingStore({
proxy : new Ext.data.HttpProxy({
url : 'get-adhoc-notifications.json',
method : 'GET'
reader : new Ext.data.JsonReader({
root : 'data'
}, [{
name : 'id'
}, {
name : 'categoryId'
}, {
name : 'categoryName'
}, {
name : 'templateName'
}, {
name : 'subject'
}, {
name : 'emailMessage'
}, {
name : 'placeHolders'
}, {
name : 'additionalEmails'
}, {
name : 'lastSent'
sortInfo : {
field : 'templateName',
direction : 'ASC'
groupField : 'categoryName'

var adHocTemplatesGrid = new Ext.grid.GridPanel({
region : 'center',
title : 'AdHoc Templates',
store : adHocStore,
view : new Ext.grid.GroupingView({
showGroupName : false,
forceFit : true,
hideGroupedColumn : true

1 Apr 2011, 1:08 AM
Because as I said before I'm working with local data I tried to avoid using proxy so I used an Ext.data.ArrayReader:

var myStore = new Ext.ux.data.PagingGroupingStore({
reader : new Ext.data.ArrayReader({
fields : arrayCampuriGrid
,data : arrayDate
,lastOptions: {params: {start: 0, limit: nrLiniiGrid}}

,sortInfo : {
field : arrayCampuriGrid[0]
,direction : 'ASC'

,groupField : arrayCampuriGrid[0]


It worked... many thanks.

My next problem is that I want also Multiple Grouping for that grid.

Is it possible: Multiple Grouping + Paging ONLY with local data as I used before?

1 Apr 2011, 1:32 AM
You cannot do multiple levels with a Grouping grid, for that you will need a tree.

2 Apr 2011, 9:51 AM
Can you please post ALL the code of your page?
i can't reproduce this grid :(