Grid: Paging of JavaScript Array already in memory

[suntoast]

Here is some code you can use for paging of a "MemoryProxy". I extended MemoryProxy to create a new class called BufferedMemoryProxy.

The only difference between this and the MemoryProxy is the section:

        if (params.limit && params.start != null) {
            result.records = result.records.slice(params.start, params.start + params.limit);
        }

Hope it works for you

Ext.data.BufferedMemoryProxy = function(data){
    Ext.data.BufferedMemoryProxy.superclass.constructor.call(this);
    this.data = data;
};

Ext.extend(Ext.data.BufferedMemoryProxy, Ext.data.MemoryProxy, {
    
    load : function(params, reader, callback, scope, arg){
        params = params || {};
        var result;
        try {
            result = reader.readRecords(this.data);
        }catch(e){
            this.fireEvent("loadexception", this, arg, null, e);
            callback.call(scope, null, arg, false);
            return;
        }
        
        if (params.limit && params.start != null) {
            result.records = result.records.slice(params.start, params.start + params.limit);
        }
        callback.call(scope, result, arg, true);
    }
});

[dxs]

Wow, this works great! but it doesn't seem to update the paging toolbar. I have used this extension to add in memory paging of datasets down to 20 rows per page. When loading 1000+ rows It correctly shows only the first 20 but the paging toolbar says page 1 of 1. When I manually type in page '2' and hit enter then the paging toolbar seems to "come alive" and correctly shows my second page of data. It also tells me that I now have 51 (in my case) pages of data. Is there some way to refresh the paging system to make this work as expected?

Thanks in advance,
David

[trbs]

suntoast; that looks exactly like my example for locales in Ext 1.0.
For that i wrote up my own in memory paging proxy; guess there not many different ways to solve this, so we ended up with almost identical code

Take a look at it in the Ext 1.0 release: Ext-1.0/examples/locale/multi-lang.html and js. This one is currently a undocumented example that includes what i called a PagingMemoryProxy and it does the same thing

Hopefully i will have a full example of this with sorting and paging ready to be officially in the documentation for the 1.1 release if our benevolent dictator for life agrees to it

[waterlowa]

Wow just checked out the multi-lang example and it's fantastic!! Can't wait to try it out.

One question: can we implement "baseParams" to filter this local data set?

[jt]

I came across this thread yesterday and have been playing around with the PagingMemoryProxy and the filter and find that it does exactly what I need.

Here my question: Is it possible to use the PagingMemoryProxy and also being able to filter on all the data in memory (not just the data displayed on the current page)?

Thanks for any and all help.

[waterlowa]

I tried the PagingMemoryProxy. It's cool. But I'm going back to HttpProxy()...

Reason is I find the ds hard to manipulate, especially when adding new row or deleting rows.

In particular, ds.reload() doesn't do anything. Maybe I missed something.

I think you nailed it, sorting also only applies to the displayed data. Using HttpProxy does increase the load on the server in a way (call to the server on almost every click), but for now it's a more perfect solution to me than PagingMemoryProxy.

Your thoughts?

[trbs]

I came across this thread yesterday and have been playing around with the PagingMemoryProxy and the filter and find that it does exactly what I need.

Here my question: Is it possible to use the PagingMemoryProxy and also being able to filter on all the data in memory (not just the data displayed on the current page)?

Thanks for any and all help.

Sure you can

This code is from the top of my head and i havn't checked it!
but i hope it'll get u started.

Where u can use sorting and filtering in very much the same way as elsewhere.
Only difference is that you'll be referencing columns of the array instead of names, most likely.

params = { filter: "foo", filterCol: 1, sort: 2 }

will filter column 1 of the array with keyword "foo" and sort in default direction on column 2.

/* Paging Memory Proxy, allows to use paging grid with in memory dataset */
Ext.data.PagingMemoryProxy = function(data) {
	Ext.data.PagingMemoryProxy.superclass.constructor.call(this);
	this.data = data;
};

Ext.extend(Ext.data.PagingMemoryProxy, Ext.data.MemoryProxy, {
	load : function(params, reader, callback, scope, arg) {
		params = params || {};
		var result;
		try {
			result = reader.readRecords(this.data);
		}catch(e){
			this.fireEvent("loadexception", this, arg, null, e);
			callback.call(scope, null, arg, false);
			return;
		}
		// filtering
		if (params.filter) {
		    results.records = results.records.filter(function(el){
			if (typeof(el)=="object"){
			    var att = params.filterCol || 0;
			    return String(el[att]).match(params.filter)?true:false;
			} else {
			    return String(el).match(params.filter)?true:false;
			}
		    });
		}
		// sorting
		if (params.sort) {
		    // use integer as params.sort to specify column, since arrays are not named
		    // params.sort=0; would also match a array without columns
		    var dir = String(params.dir).toUpperCase() == "DESC" ? -1 : 1;
        	    var fn = function(r1, r2){
			return r1 < r2;
        	    };
		    result.records.sort(function(a, b) {
			var v = 0;
			if (typeof(a)=="object"){
			    v = fn(a[params.sort], b[params.sort]) * dir;
			} else {
			    v = fn(a, b) * dir;
			}
			if (v==0) {
			    v = (a.index < b.index ? -1 : 1);
			}
			return v;
		    });
		}
		// paging
		if ( (params.start) && (params.limit) ) {
			result.records = result.records.slice(params.start, params.start+params.limit);
		}
		callback.call(scope, result, arg, true);
	}
});

[jt]

Thanks for the code. It worked nicely.

I only needed to make a couple of minor changes, noted below:

Removed the s from result:

result.records = result.records.filter(function(el) {


In the filter section:

return String(el.data[att]).match(params.filter)?true:false;

So I could filter based on a column name.


In the sort section:

v = fn(a.data[params.sort], b.data[params.sort]) * dir;

So I could sort based on a column name.


Pretty impressive for not being checked.


Should the Number of pages be updated in the PagingToolbar with the results returned (i.e. If the filter returns 1 row should the page count be 1 of 1)?

If the filtered results span multiple pages, how do I see the other pages? Once I click on the next arrow the display no longer uses the filter and just displays the original data.

Thanks for the help.

[trbs]

yeah nice report, only a typo and common mistake (for me), not too bad

Should the Number of pages be updated in the PagingToolbar with the results returned (i.e. If the filter returns 1 row should the page count be 1 of 1)?

absolutly right; the filtering should modify the totalRecords attribute, at the end of filtering there should be this:
result.totalRecords = result.records.length;

If the filtered results span multiple pages, how do I see the other pages? Once I click on the next arrow the display no longer uses the filter and just displays the original data.

Did you put the filtering parameters in store.baseParams ?
baseParams will remember your filter settings, params given as a attributes to the load() method will not.
or use store.on('beforeload') event as covered elsewhere in the forums

[jt]

Thanks.

These changes did it. It gave me what I wanted.

I am now doing a 'beforeload' event and storing the filter in the baseParams. It works beautifully.

I needed to make a change to the sort routine.

I also needed to adjust to the paging from:

		// paging
		if (params.start && params.limit) {

to:

		// paging
		if (params.start !== undefined && params.limit !== undefined) {

This was needed because if params.start==0 then params.start is false.

I have attached the js file with the changes.

Thanks again.