PDA

View Full Version : Pagination in grid with out remote computing



r.selvaganapathi
31 May 2007, 4:56 AM
hi all,
I want to make the grid with pagination .But the pagination should be handled in client side.
For example I have 40 records.20 records only are showed at a time.When i press the pagination
button,it should go to the next page with out server side computing..First time it self I want to load all
the datas.But I want to restrict the datas according to pagination..Is it possible?

Animal
31 May 2007, 5:35 AM
What's the point? Why not just scroll?

trbs
31 May 2007, 12:33 PM
this has been covered in several other threads on the forum, search for PagingMemoryGrid

gricceri
26 Jun 2007, 12:45 AM
hi all,
I want to make the grid with pagination .But the pagination should be handled in client side.
For example I have 40 records.20 records only are showed at a time.When i press the pagination
button,it should go to the next page with out server side computing..First time it self I want to load all
the datas.But I want to restrict the datas according to pagination..Is it possible?

Hi, I'm not sure if this is the best way to address this issue, anyway I post it.

I wrote a PagedStore class that extend the Store class and override the original loadRecords method. I slightly modified it to trim the records array.
Anyway this method doesn't work with sort.
Another way could be ( even if I'm not sure about performance), load all the this.data collection, apply sort, get the records array with this.data.getRange, clear the data and reload it ( very dirty :-?).




Ext.data.PagedStore = function(config){

Ext.data.PagedStore.superclass.constructor.call(this, config);
};



Ext.extend(Ext.data.PagedStore, Ext.data.Store, {

loadRecords : function(o, options, success){

if(!o || success === false){
if(success !== false){
this.fireEvent("load", this, [], options);
}
if(options.callback){
options.callback.call(options.scope || this, [], options, false);
}
return;
}

options.params = options.params || {};

var r = o.records;
if(typeof options.params.start != "undefined" && typeof options.params.limit != "undefined" ) {
r = r.slice (options.params.start, options.params.start+options.params.limit)
}

var t = o.totalRecords || r.length;
for(var i = 0, len = r.length; i < len; i++){
r[i].join(this);
}

if(!options || options.add !== true){
this.data.clear();
this.data.addAll(r);
this.totalLength = t;
this.applySort();
this.fireEvent("datachanged", this);
}else{
this.totalLength = Math.max(t, this.data.length+r.length);
this.data.addAll(r);
}
this.fireEvent("load", this, r, options);
if(options.callback){
options.callback.call(options.scope || this, r, options, true);
}
}

});

gricceri
26 Jun 2007, 2:55 AM
This works with sorting too:




Ext.data.PagedStore = function(config){
Ext.data.PagedStore.superclass.constructor.call(this, config);
this.allData = this.data.clone();
};

Ext.extend(Ext.data.PagedStore, Ext.data.Store, {

loadRecords : function(o, options, success){

if(!o || success === false){
if(success !== false){
this.fireEvent("load", this, [], options);
}
if(options.callback){
options.callback.call(options.scope || this, [], options, false);
}
return;
}

options.params = options.params || {};

var r = o.records;
var t = o.totalRecords || r.length;

this.backParams = options.params;

for(var i = 0, len = r.length; i < len; i++){
r[i].join(this);
}

this.allData.clear();
this.allData.addAll(r);

if(!options || options.add !== true){
this.applySort();
this.totalLength = t;
this.fireEvent("datachanged", this);
}else{
this.totalLength = Math.max(t, this.data.length+r.length);
this.data.addAll(r);
}
this.fireEvent("load", this, r, options);
if(options.callback){
options.callback.call(options.scope || this, r, options, true);
}
},

trimRecords: function(data, params){
if(typeof params.start != "undefined" && typeof params.limit != "undefined" ) {
r = data.getRange ( params.start, params.start+params.limit );
}
return r;
},

applySort : function(){

if(this.sortInfo && !this.remoteSort){
var s = this.sortInfo, f = s.field;
var st = this.fields.get(f).sortType;
var fn = function(r1, r2){
var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};

this.allData.sort(s.direction, fn)
var r = this.trimRecords ( this.allData, this.backParams );
this.data.clear();
this.data.addAll(r);

if(this.snapshot && this.snapshot != this.data){
this.snapshot.sort(s.direction, fn);
}
} else {
var r = this.trimRecords ( this.allData, this.backParams );
this.data.clear();
this.data.addAll(r);
}
}

});

kavi
28 Apr 2008, 9:07 AM
hi,
I have a grid with pagination, where pagination works fine, but the data is not getting sorted properly. I want the entire data to be sorted, but in my grid the data which is displayed in each page is only getting sorted... Is it possible to sort the entire data, at the client side before displaying it in the paging grid?

Thanks:>

mjlecomte
28 Apr 2008, 2:09 PM
hi,
I have a grid with pagination, where pagination works fine, but the data is not getting sorted properly. I want the entire data to be sorted, but in my grid the data which is displayed in each page is only getting sorted... Is it possible to sort the entire data, at the client side before displaying it in the paging grid?

Thanks:>

Do you realize you are posting in an old version of ext forum?

Check the FAQ on grids in my signature for your question. Basically, while you are paging the grid only has that page worth of data that it knows about. If you want to use paging and sort based on all data you need remoteSort: true and then the sorting is up to you to handle server side. That is the more 'common' way it is done. You can also use paging memory proxy extension to do more client side. you did not post your code, so I don't know which one you are trying to do.