PDA

View Full Version : Paging for Grid Not Working



scblue
8 Mar 2010, 12:56 AM
Hi all,

I have a grid populated from a csv file (via Json).
The csv file is read with php and returned as Json Metadata to populate the grid.
And now my Paging Toolbar do not work.

Is there any way to use paging with this?
I know with normal MySql data, we use the Limit/Start parameters.
How do I page or break the data (into pages) from csv file?
Anyone knows?

Thanks in advance!

Animal
8 Mar 2010, 1:12 AM
I have a class which might be helpful, but it's in a customer's project right now. I'll ask him if he'll allow it to be posted with a free licence as a UX.

Basically, it's a StoreProxy which in response to "request" calls, grabs data out of another Store. So you could have a base Store containing all your data from the CSV file, and a paged Store, grabbing chunks of that through this proxy.

I'll email the customer this evening and see what he says.

Animal
8 Mar 2010, 1:13 AM
I have a class which might be helpful, but it's in a customer's project right now. I'll ask him if he'll allow it to be posted with a free licence as a UX.

Basically, it's a StoreProxy which in response to "request" calls, grabs data out of another Store. So you could have a base Store containing all your data from the CSV file, and a paged Store, grabbing chunks of that through this proxy.

I'll email the customer this evening and see what he says.

Condor
8 Mar 2010, 1:44 AM
How big is the .csv file? Could you load the entire set on the client and show it in pages using the PagingStore (http://www.extjs.com/forum/showthread.php?t=71532) user extension?

scblue
8 Mar 2010, 10:20 PM
Thanks Animal.
Looking forward to your reply. ;)

Condor, the file size varies with different users. But I'll give it a try and see what happens.

Thanks!

Animal
8 Mar 2010, 10:40 PM
Here's the code. I'll post a UX thread later



Ext.override(Ext.data.Store, {
/**
* Returns a range of Records between specified indices.
* @param {Number} startIndex (optional) The starting index (defaults to 0)
* @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
* @param {Boolean} bypassFilter (optional) Pass <code>true</code> to return data regardless of filtering.
* @return {Ext.data.Record[]} An array of Records
*/
getRange : function(start, end, bypassFilter){
var d = (bypassFilter === true && this.snapshot) ?
this.snapshot: this.data;
return d.getRange(start, end);
}
});

/**
* @class Ext.data.StoreProxy
* @extends Ext.data.DataProxy
* <p>This class provides data reading and writing services by connecting its client Store to another Store
* from which it reads blocks of Records according to <code>start</code> and <code>limit</code> parameters.</p>
* <p>In this version, only the "read" action is supported.</p>
* <p>Requires the override of Ext.store.getRange to bypass any filtering.</p>
*/
Ext.data.StoreProxy = Ext.extend(Ext.data.DataProxy, {
constructor : function(config){
Ext.data.StoreProxy.superclass.constructor.call(this);
this.store = config.store;
},
request: function() {
this.doRequest.apply(this, arguments);
},
doRequest : function(action, rs, params, reader, callback, scope, options){
if (!this.store.getCount()) {
this.store.on({
load: this.doRequest.createDelegate(this, arguments),
single: true
});
return;
}

if (params.sort) {
this.store.sort(params.sort, params.dir);
}
var rangeParams = [];
if (Ext.isNumber(params.start) && params.limit) {
rangeParams = [ params.start, params.start + params.limit - 1 ];
}
rangeParams[2] = true;
var records = this.store.getRange.apply(this.store, rangeParams);

// Records cannot be shared, clone them.
for (i = 0, l = records.length; i < l; i++) {
records[i] = records[i].copy(records[i].id);
}

var result = {
success: true,
records: records,
totalRecords: this.store.getTotalCount()
};
callback.call(scope, result, options, true);
}
});

scblue
9 Mar 2010, 5:22 PM
Condor,
The file sizes will eventually be too big, and I don't think local paging will work.

Animal,
Thanks for the code.
I know this will sound stupid, but how exactly do I use the code?
I'm still relatively new at this.

Thanks again. ;)

Animal
9 Mar 2010, 10:03 PM
You use a Proxy in your Store don't you?

Condor
10 Mar 2010, 12:11 AM
Animal's solution is also for local paging, so that won't work either if your dataset is too big.

You will have to write a server application the reads the .csv file and returns the records requested with the start and limit parameters.

scblue
10 Mar 2010, 1:32 AM
Yeah, I realized that after I put in that comment.
I am using your Paging Store at the moment, Condor.
A bit slow on the response, will have to figure out a way to do it at server side.

Thanks Animal & Condor!