PDA

View Full Version : [2.x] Ext.ux.data.PagingStore [v0.4]



Condor
15 Jan 2009, 3:34 AM
Ext 2.2 natively only supports remote paging (the server needs to process the start and limit parameters).

For local paging you can use the PagingMemoryProxy user extension, but it has some disadvantages:
1. You have to write extra code to remote load the data for the proxy.
2. query, filter and collect only work on the current page. You have to write extra code to use the PagingMemoryProxy filter support.
3. Local sorting works, but you need to set remoteSort:true. There is no remote sorting support.
4. Added and removed records are only remembered for the current page.
5. Changing the page is relatively slow (PagingMemoryProxy reprocesses all data).

All these problems can be solved by adding paging support to Store instead of MemoryProxy.

Ext.ux.data.PagingStore is a drop-in replacement for Ext.data.Store. Local paging should work directly after replacing Store with PagingStore (there are also SimplePagingStore and JsonPagingStore replacements for SimpleStore and JsonStore).

Example of a remote store:

var store = new Ext.ux.data.PagingSimpleStore({
fields: [...],
url: 'data.php',
autoLoad: {params: {start: 0, limit: 10}}
});

Example of a local store:

var store = new Ext.ux.data.PagingSimpleStore({
fields: [...],
data: data,
lastOptions: {params: {start: 0, limit: 10}}
});

Just one note:
If you load a PagingStore it will ONLY request new data if any of the parameters (except start and limit) were changed from the previous load (otherwise it will just show a different page of the same data).
If you want to force a load you need to delete the lastParams property before loading the store.

Example: To make the refresh button of the paging toolbar do a forced reload you would need:

Ext.override(Ext.PagingToolbar, {
onClick : function(which){
var store = this.store;
switch(which){
case "first":
this.doLoad(0);
break;
case "prev":
this.doLoad(Math.max(0, this.cursor-this.pageSize));
break;
case "next":
this.doLoad(this.cursor+this.pageSize);
break;
case "last":
var total = store.getTotalCount();
var extra = total % this.pageSize;
var lastStart = extra ? (total - extra) : total-this.pageSize;
this.doLoad(lastStart);
break;
case "refresh":
delete store.lastParams;
this.doLoad(this.cursor);
break;
}
}
});

I put the PagingStore code together in just a few minutes and I haven't tested if thoroughly. I would appreciate any feedback.

Note: I didn't create a PagingGroupingStore, because I don't think paging and grouping should be used together, but for those who want one, here is the code:

Ext.ux.data.PagingGroupingStore = Ext.extend(Ext.ux.data.PagingStore, {
remoteGroup: Ext.data.GroupingStore.prototype.remoteGroup,
groupOnSort: Ext.data.GroupingStore.prototype.groupOnSort,
clearGrouping: Ext.data.GroupingStore.prototype.clearGrouping,
groupBy: Ext.data.GroupingStore.prototype.groupBy,
applySort: Ext.data.GroupingStore.prototype.applySort,
applyGrouping: Ext.data.GroupingStore.prototype.applyGrouping,
getGroupState: Ext.data.GroupingStore.prototype.getGroupState
});

Update:
v0.1: Initial version
v0.2: Add support for local data
v0.3: Fixed bug in SimplePagingStore and in getTotalCount (fixes PagingToolbar pagecount).
v0.4: Fixed another bug in local paging

The Ext 3.0 version can be found here (http://www.extjs.com/forum/showthread.php?t=71532).

andycramb
15 Jan 2009, 3:26 PM
If i understand this correctly I could use this for paging on data that has its source locally
For example I have an app that pulls in JSON from a javascript includes

Snapshot of the data - see below
Your extension should allow me to page through the data?

I did try it but I could not get the paging working
I got the grid to display the store fine and there were no errors
The paging bar showed page 1 of 1 with the navigation icons greyed out
Below is the copy of the store and grid code
Should I be able to get this working for my set up?
Thanks

store:
myApp.myStore = new Ext.ux.data.JsonPagingStore({
data: myApp.mydData,
baseParams: {params:{start: 0,limit: 5}},
root: 'rows',
id: 'id',
// totalRecords : 5,
successProperty: 'success',
fields:[
//{name:'id',type:'float'}
{name:'dueDate',type:'date',format:'d/m/y'}
,{name:'creationDate',type:'date',format:'d/m/y'}
,{name:'period'}//.....


grid
//...
,listeners: {
render: function(g){
g.getSelectionModel().selectRow(0);
}
,delay: 500 // Allow rows to be rendered.
}
,bbar:new Ext.PagingToolbar({
store: myApp.myStore,
pageSize: 6,
displayInfo: true,
displayMsg: 'Displaying categories {0} - {1} of {2}',
emptyMsg: "No categories to display"
})

data


var myData = {
"records": 8,
"success": true,
rows:[{
"id": "1",
"dueDate": "Mon Jan 12 2009",
"creationDate": "Mon March 05 2010",
"period": "Q4 2008",
"type": "Sales",
"description": "Support the Vision tendering process",
"customer": "Callum Lindsay",
"performer": "Andy Cramb",
"community": "Vision",
"state": "Acknowledgment",
"lastAct": "Assert Complete",
"scope": "private",
"openClose": "open",
"comments": [{
"commentId": "1",
"person": "Andy Cramb",
"act": "New Promise",
"date": "16/12/2008 09:21",
"comment": "I aim to support the Vision tendering process"
},{//......

andycramb
15 Jan 2009, 3:33 PM
I uploaded it to http://cramb.org.uk/extjs/paging/main.html so that you can see what I am trying to describe

Condor
15 Jan 2009, 11:26 PM
I originally planned PagingStore for remote data (with a proxy) and it didn't work for local data.

I modified the code (v0.2) and your example should work now.

ps. I would use lastOptions instead of baseParams (start and limit are dynamic, so they shouldn't be stored in baseParams).

andycramb
16 Jan 2009, 1:40 AM
Thanks I will give it a go when I get back from work tonight
I guess I misunderstood how paging works out of the box with ExtJS
For a normal paging toolbar this goes off to the server to get each set of paged records and informs the server of this be incrementing the params
With your extension and the PagingMemoryProxy extension it still collects the data from the server but does it get the complete recordset in one go and what your extension does and the PagingMemoryProxy extension does is to then mange that store/daatset locally?
Therefore there is no further calls to the server.

Condor
16 Jan 2009, 1:43 AM
Correct, both PagingStore and PagingMemoryProxy load the entire dataset and return only the current page.

andycramb
16 Jan 2009, 12:39 PM
Thanks
Added lastOptions instead of baseParams
Could not getting paging to work onLoad
When I clicked the refresh button it worked to a degree but the first page had 6 records when I had this specified



lastOptions: {params:{start: 0,limit: 4}},


I uploaded the latest version to http://www.cramb.org.uk/extjs/paging/main.html

dolittle
16 Jan 2009, 3:55 PM
If I understand correctly, your extension loads the complete data and then pages through it locally. It is great and I have a feature request. What if we want to enjoy both worlds?

Let's say you have 1,000 items on the server and it's expensive to load them all.
You can load 100 items each time but have the page size set to 10 so the user gets much better user experience. When the user gets to page 10, the extension will automatically load the next 100 items from the server.

It could be even better if there is a config option to load the next 100 items from the server when the current local page is:

currentPage = maxLocalPage - tolerance
So if tolerance = 3, the proxy will load the next 100 items when the user gets to page 7 and the experience will be completely fluent.

What do you think?

mjlecomte
16 Jan 2009, 4:53 PM
What's the difference between that and livegrid extension then?

tonedeaf
17 Jan 2009, 12:58 AM
What's the difference between that and livegrid extension then?
These come immediately to mind:

Separate Commercial License for livegrid (for commercial development)
Grid grouping features available for Condor's extension
A *LOT* less code and faster performance
Paging interface instead of scrolling (preferred in many circumstances)


Really, I would choose it anyday over livegrid extension. Another vote for integrating features suggested by dolittle.

galdaka
17 Jan 2009, 2:38 AM
Is posible Live examples?

andycramb
19 Jan 2009, 2:56 PM
@dolittle


You can load 100 items each time but have the page size set to 10 so the user gets much better user experience. When the user gets to page 10, the extension will automatically load the next 100 items from the server.

I like the idea. That would make it much quicker for the user
What would happen if the user typed in a page number?
I guess they would just have to wait

@Condor I managed to look at it again and I did not have the params set up correctly
It looks like it will work as it behaves correctly after clicking the "Refresh" button
I tried to figure out how to fire the same functionality when it was initially loaded but I am struggling to walk the code and find out why maybe the event did not fire the event handler on load of the grid. It maybe something I have missed on setting up the store or grid?

What I also think would be nice(there may be an extension out already that I haven't seen)
How about allowing users to navigate the grid by displaying a "navigational bar" on the grid based on their sorted column.At the moment if this is a large dataset they have to take a best guess at the page where they might find the information they are looking for.
So for large data that contained a sorted column string, paging would mean choosing an "a,b,c,d...z" item. This would allow users to go straight to the strings that began with that letter. Jeez I hope that makes sense
Andy

Condor
20 Jan 2009, 1:12 AM
What I also think would be nice(there may be an extension out already that I haven't seen)
How about allowing users to navigate the grid by displaying a "navigational bar" on the grid based on their sorted column.At the moment if this is a large dataset they have to take a best guess at the page where they might find the information they are looking for.
So for large data that contained a sorted column string, paging would mean choosing an "a,b,c,d...z" item. This would allow users to go straight to the strings that began with that letter. Jeez I hope that makes sense
Andy

Wouldn't that almost be the same as filtering? There is a user extension that allows filtering from the (paging) toolbar.

andycramb
20 Jan 2009, 2:16 AM
Wouldn't that almost be the same as filtering?

Yes just another way to skin a cat I guess but maybe more usable than applying filters
It also does not return a subset of data but takes you to the specific place in the record set
The live grid example I know doesnt have paging but could also benefit from it as well
It would take you to a point where you could begin your search rather than scrolling back and forth


There is a user extension that allows filtering from the (paging) toolbar
I could not find the Paging/Filter plugin.
I could find some that use a drop downmenu to return a subset of the data however

andycramb
20 Jan 2009, 3:26 AM
Something like this I was thinking

11530

techanix
27 Jan 2009, 10:11 PM
Hi there,

First of all, thanks for this awesome extension but I have problem getting it to work completely.

1. First I have a reader (ArrayReader) and a PagingStore as below :




dataset = new Ext.ux.data.PagingStore({
reader: new Ext.data.ArrayReader(
{},
[{name: 'item_name'},
{name: 'item_name_short'}
]
),
lastOptions: { params: { start: 0, limit: 6} }
});

//and i insert some records into the store later
for (var j = 0; j < ls_reqdata.length; j++) {
dataset.add(new Ext.data.Record(ls_reqdata[j]));
}




2. I create the PagingToolBar and DataView as below:




this.pagingtoolbar = new Ext.PagingToolbar({
id: this.id + '_pagingtoolbar',
pageSize: 6,
store: this.contentstore,
//displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});


this.contentdataview = new Ext.DataView({
id: this.id + '_content_dv',
store: this.contentstore,
tpl: tpl,
style: 'border: none; overflow-y: auto; overflow-x: hidden',
multiSelect: false,
overClass: 'x-view-over',
itemSelector: 'div.content-wrap',
emptyText: 'No images to display',
onClick: function(dv, index, htmlnode, e) {

//handle click here....

}
});



The DataView displays and gets filtered correctly according to lastOptions params, but the Previous and Next buttons are still disabled and paging shows "Page 1 of 1" (whereas it should display 4 pages as I have 20 over records), and clicking on Refresh button, it still loads the same records.


P/S - I have also overridden the PagingToolbar as advised earlier in this thread.


What am I missing here ?.. or do I need to use specific type of reader to get the PagingStore working correctly ?

Thanks in advance.

Condor
27 Jan 2009, 10:52 PM
New records always get added to the current page. You should load the data instead, e.g.


var dataset = new Ext.ux.data.PagingStore({
reader: new Ext.data.ArrayReader({
},[
{name: 'item_name'},
{name: 'item_name_short'}
]),
lastOptions: {
params: {start: 0, limit: 6}
},
data: ls_reqdata
});
or

dataset.loadData(ls_reqdata);

Condor
27 Jan 2009, 10:54 PM
If you want to force repaging after adding records you should use:

store.applyPaging();
store.fireEvent('datachanged', store);

techanix
28 Jan 2009, 3:27 AM
Thank you pointing me to the right direction. Everything is working beautifully now :D

I have now changed the reader to be a XmlReader and use loadData() function as suggested to insert the records into the Store:




//'row' - repeating element in data XML
//cols - the list of fields in array format
dataset = new Ext.ux.data.PagingStore({
reader: new Ext.data.XmlReader(
{ record: 'row' },
cols
)
});

//load records into store
dataset.loadData(dataxml);

whodat
6 Feb 2009, 7:39 AM
Ext 2.2 natively only supports remote paging (the server needs to process the start and limit parameters).

Ext.ux.data.PagingStore is a drop-in replacement for Ext.data.Store. Local paging should work directly after replacing Store with PagingStore (there are also SimplePagingStore and JsonPagingStore replacements for SimpleStore and JsonStore).



You just saved me a day and half of coding with this extension Condor. Thanks a billion!=D>=D>=D>

I was trying to code this myself and thought look at the extension forum.

I've tested this on FF3 and IE7. No issues at all.

whodat
8 Feb 2009, 5:27 PM
Correct, both PagingStore and PagingMemoryProxy load the entire dataset and return only the current page.

Condor, how would I be able to get the entire data set locally if needed. I'm trying to export the data in the Ext.ux.PagingStore to excel, but I only get the the page which is shown to the user as expected.

Can you please let me know if this is possible? Though I could find out if this was possible with with the PagingStore's parent class.:-?

Thanks in advance..

whodat
9 Feb 2009, 7:14 AM
Condor, how would I be able to get the entire data set locally if needed. I'm trying to export the data in the Ext.ux.PagingStore to excel, but I only get the the page which is shown to the user as expected.

Can you please let me know if this is possible? Though I could find out if this was possible with with the PagingStore's parent class.:-?

Thanks in advance..

Got closer to completing this. So issue lies when calling the getTotalCount() from the PagingStore.

this.store.getCount() = returns the size of the current page loaded in the grid and not the total number of records in the store as based on it's parent's implementation of getTotalCount().

So instead of calling store.getCount(), I was able to get the total size of dataset by doing



this.store.allData.items.length

And it returned the full data set size.

Condor
9 Feb 2009, 7:33 AM
Yes, this.store.allData is a MixedCollection that contains all records.

You can use it to export all data to Excel (the default code expects a store, but it can easily be changed to a MixedCollection).

whodat
10 Feb 2009, 7:27 AM
If you want to force repaging after adding records you should use:

store.applyPaging();
store.fireEvent('datachanged', store);

Condor is this used anytime new records are reloaded or only when you add records to the store?

One of the issues I noticed is, when the store is originally loaded with lets say 100 records showing 20 per page (so 5 pages).

I then reload the store while I'm on page 3, 4, or 5 and there are only 40 records still showing 20 per page. The paging tool bar doesn't update correctly.

By not updating correctly, it shows nothing in the grid since I am page 3, but I have the previous page option allows me to paginate to page 2 and then grid shows the 20 records.

My question is, do I need to add a listener for reload and call applyPaging()?

Condor
10 Feb 2009, 7:58 AM
That is something that is not properly handled by PagingStore.

Could you try if this fixes it:

Ext.override(Ext.ux.data.PagingStore, {
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;
}
var r = o.records, t = o.totalRecords || r.length;
if(!options || options.add !== true){
if(this.pruneModifiedRecords){
this.modified = [];
}
for(var i = 0, len = r.length; i < len; i++){
r[i].join(this);
}
if(this.allData){
this.data = this.allData;
delete this.allData;
}
if(this.snapshot){
this.data = this.snapshot;
delete this.snapshot;
}
this.data.clear();
this.data.addAll(r);
this.totalLength = t;
this.applySort();
if(!this.allData){
this.applyPaging();
}
if(r.length != this.getCount()){
r = [].concat(this.data.items);
}
this.fireEvent("datachanged", this);
}else{
this.totalLength = Math.max(t, this.data.length+r.length);
this.add(r);
}
options[this.paramNames.start] = this.start;
this.fireEvent("load", this, r, options);
if(options.callback){
options.callback.call(options.scope || this, r, options, true);
}
},
applyPaging : function(){
var start = this.start, limit = this.limit;
if((typeof start == 'number') && (typeof limit == 'number')){
var allData = this.data, data = new Ext.util.MixedCollection(allData.allowFunctions, allData.getKey);
if(start >= allData.getCount()){
start = this.start = allData.getCount() ? Math.floor((allData.getCount() - 1) / limit) : 0;
}
data.items = allData.items.slice(start, start + limit);
data.keys = allData.keys.slice(start, start + limit);
var len = data.length = data.items.length;
var map = {};
for(var i = 0; i < len; i++){
var item = data.items[i];
map[data.getKey(item)] = item;
}
data.map = map;
this.allData = allData;
this.data = data;
}
}
});

whodat
10 Feb 2009, 9:07 AM
That is something that is not properly handled by PagingStore.

Could you try if this fixes it:

Ext.override(Ext.ux.data.PagingStore, {
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;
}
var r = o.records, t = o.totalRecords || r.length;
if(!options || options.add !== true){
if(this.pruneModifiedRecords){
this.modified = [];
}
for(var i = 0, len = r.length; i < len; i++){
r[i].join(this);
}
if(this.allData){
this.data = this.allData;
delete this.allData;
}
if(this.snapshot){
this.data = this.snapshot;
delete this.snapshot;
}
this.data.clear();
this.data.addAll(r);
this.totalLength = t;
this.applySort();
if(!this.allData){
this.applyPaging();
}
if(r.length != this.getCount()){
r = [].concat(this.data.items);
}
this.fireEvent("datachanged", this);
}else{
this.totalLength = Math.max(t, this.data.length+r.length);
this.add(r);
}
options[this.paramNames.start] = this.start;
this.fireEvent("load", this, r, options);
if(options.callback){
options.callback.call(options.scope || this, r, options, true);
}
},
applyPaging : function(){
var start = this.start, limit = this.limit;
if((typeof start == 'number') && (typeof limit == 'number')){
var allData = this.data, data = new Ext.util.MixedCollection(allData.allowFunctions, allData.getKey);
if(start >= allData.getCount()){
start = this.start = allData.getCount() ? Math.floor((allData.getCount() - 1) / limit) : 0;
}
data.items = allData.items.slice(start, start + limit);
data.keys = allData.keys.slice(start, start + limit);
var len = data.length = data.items.length;
var map = {};
for(var i = 0; i < len; i++){
var item = data.items[i];
map[data.getKey(item)] = item;
}
data.map = map;
this.allData = allData;
this.data = data;
}
}
});

Thanks, will let you know..

whodat
10 Feb 2009, 10:55 AM
Is there somewhere significant I should place this code?

I placed it right after
Ext.extend(Ext.ux.data.JsonPagingStore, Ext.ux.data.PagingStore); in the original PagingStore class.

It doesn't seem to update the current page or the "Displaying parts " text.

I have attached a screenshot. Unless you tell me I have placed your updated code in the wrong place.

Please let me know Condor and thanks for your help.

Just to clarify, I orginally loaded the store with 12 records, then reloaded the store again with 9 records while on the 2nd page of the first dataset.

galdaka
10 Feb 2009, 11:10 AM
Live exalpme please!!

Greetings,

whodat
10 Feb 2009, 11:16 AM
That is something that is not properly handled by PagingStore.

Could you try if this fixes it:


What did to correct this problem was the following:

When I called reload to update the store with the new records.. I called reload with the following params

ds.reload({params:{start: 0, limit: 10}});

And everything was solved, the pages reloaded correctly.. Maybe not exactly the behavior you intended but for my users it will work.

Thanks for the help.

Condor
10 Feb 2009, 11:20 PM
The change I suggested should made sure that if you request a page that isn't in the dataset, the last page is shown instead.

But if you already know you are forced reloading the data then you should indeed select the first page (as you do now).

hemvanh
22 Feb 2009, 7:48 PM
Thanks
Added lastOptions instead of baseParams
Could not getting paging to work onLoad
When I clicked the refresh button it worked to a degree but the first page had 6 records when I had this specified



lastOptions: {params:{start: 0,limit: 4}},


I uploaded the latest version to http://www.cramb.org.uk/extjs/paging/main.html

I also can not make the paging to work when the page loaded for the first time, any solution for this yet? or am i doing something wrong here :

LGjsonReader=new Ext.data.JsonReader({
root: 'rootLeague',
totalProperty:'totalCount',
id: 'ModuleId'
},[
{name: 'ModuleId'},
{name: 'ModuleName'},
{name: 'Selected'}
]);

.................

leagueStore = new Ext.ux.data.PagingStore({
proxy: new Ext.data.HttpProxy({method:'post', url:'rManageOddsSel.aspx?m=league'+pars})
,sortInfo: {
field: 'Selected',
direction: "DESC"
}
, reader: LGjsonReader
,lastOptions: { params: { start: 0, limit: 12} }
});

LGcolModel = new Ext.grid.ColumnModel([
{id:"ModuleId", header: "ID", width: 100, dataIndex: 'ModuleId',hidden:true},
{header: "", width: 50, renderer:putLgCheckBox, dataIndex: 'Selected',align:'center'},
{header: "Module Name", width: 700, dataIndex: 'ModuleName'}
]);

........


},{
xtype: 'grid',
store: leagueStore,
colModel:LGcolModel,
height:500,
width:785,
title:'Select Leagues',
id:'lg_mt_Grid'
,bbar: new Ext.PagingToolbar({
pageSize: 12,
store: leagueStore
})

please help me :D

hemvanh
22 Feb 2009, 8:03 PM
i got it from another thread :D

paging_store.load({params:{start:0, limit:5}});

http://extjs.com/forum/showthread.php?t=60757
everything's fine now

thanks alot :D

whodat
18 Mar 2009, 3:15 PM
Hi Condor,

I'm trying to submit a form and load the PagingStore with the Records in the action.result.

The grid remains empty, but once I click the refresh button in the Toolbar, the grid loads properly.

I'm assuming I am not properly loading the store. Can you assist me?


listeners: {
searchForResults: function(){
searchCriteriaPanel.getForm().submit({
url: '/TEST/employee_search.hra',
method: 'POST',
success: function(f, a){
//alert(a.result);
searchResultsGrid=createSearchResultGrid();
searchResultsGrid.getStore().loadData(a.result, true);
searchResultsGrid.getStore().applyPaging();
searchResultsGrid.getStore().fireEvent('datachanged', searchResultsGrid.getStore());


},
failure: function(f, a){
Ext.Msg.alert('Warning', a.failureType);
}
});
},

Condor
18 Mar 2009, 10:58 PM
Do you really want to append the records? Otherwise you can simply use:

searchResultsGrid.getStore().loadData(a.result[s]);

ps. You might need to reset paging to the first page before loading by changing lastOptions, e.g.

store.lastOptions.params = Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions.params);

whodat
19 Mar 2009, 2:36 AM
Do you really want to append the records? Otherwise you can simply use:

searchResultsGrid.getStore().loadData(a.result/*, true*/);
//searchResultsGrid.getStore().applyPaging();
//searchResultsGrid.getStore().fireEvent('datachanged', searchResultsGrid.getStore());ps. You might need to reset paging to the first page before loading by changing lastOptions, e.g.

store.lastOptions = Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions);

Thanks Condor, I'll try it out as soon as I hit the office.. And no, I do not want to append, but I figured the first time it would not matter.



searchResultsGrid.getStore().loadData(a.result);
searchResultsGrid.getStore().lastOptions)= Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions);

Condor
19 Mar 2009, 2:55 AM
The code I posted wasn't correct. It should have been:

if(searchResultsGrid.getStore().lastOptions){
searchResultsGrid.getStore().lastOptions.params =
Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions.params);
}
searchResultsGrid.getStore().loadData(a.result);

whodat
19 Mar 2009, 4:57 AM
The code I posted wasn't correct. It should have been:

if(searchResultsGrid.getStore().lastOptions){
searchResultsGrid.getStore().lastOptions.params =
Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions.params);
}
searchResultsGrid.getStore().loadData(a.result);

I am getting the data back, but the it displays the whole data set instead of the page limit.

My data set size was 24 and my limit is 20.

Condor
19 Mar 2009, 7:08 AM
Try this:

if(!searchResultsGrid.getStore().lastOptions){
searchResultsGrid.getStore().lastOptions = {};
}
searchResultsGrid.getStore().lastOptions.params =
Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions.params);
searchResultsGrid.getStore().loadData(a.result);

whodat
19 Mar 2009, 7:20 AM
Try this:

if(!searchResultsGrid.getStore().lastOptions){
searchResultsGrid.getStore().lastOptions = {};
}
searchResultsGrid.getStore().lastOptions.params =
Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions.params);
searchResultsGrid.getStore().loadData(a.result);

Condor, I looked at your code for the loadData method in the PagingStore class



loadData : function(o, append){
this.isPaging(Ext.apply({}, this.lastOptions, this.baseParams));
var r = this.reader.readRecords(o);
this.loadRecords(r, {add: append}, true);
}
I see that you are copying the the lastOptions and baseParams with Ext.apply so I added start and limit to the baseParams of my PagingStore instantiation and this has worked.

Is this an ok approach? If so, sorry for not posting that code...



My code as of now:
PagingStore creation


var pagingStore= new Ext.ux.data.PagingStore({
baseParams: {
start: 0,
limit: 20
},
proxy: new Ext.data.HttpProxy({url: '/HRA/employee_search.hra'}),
reader: new Ext.data.JsonReader({totalProperty: 'resultSize', root: 'rows', id: 'employeeId'},
['employeeName', 'group', 'function', 'employeeId'])
});
My form submit event


searchForResults: function(){
searchCriteriaPanel.getForm().submit({
url: '/HRA/employee_search.hra',
method: 'POST',
success: function(f, a){
searchResultsGrid=createSearchResultGrid();

if(searchResultsGrid.getStore().lastOptions){
searchResultsGrid.getStore().lastOptions.params =
Ext.applyIf({start: 0, limit: 20}, searchResultsGrid.getStore().lastOptions.params);
}
searchResultsGrid.getStore().loadData(a.result, {start: 0, limit: 20});
var tabPanel=cardContainer.items.itemAt(0);
tabPanel.add(searchResultsGrid);
tabPanel.setActiveTab(searchResultsGrid);
tabPanel.doLayout();
cardContainer.doLayout();
viewport.doLayout();
},
failure: function(f, a){
Ext.Msg.alert('Warning', a.failureType);
}
});
}
Also, when I submit the form again, would I have to delete the lastParams in order to get a fresh set of data? Or your piece of code which copies over the the original last options and that will fire the "datachanged" event?



if(searchResultsGrid.getStore().lastOptions){
searchResultsGrid.getStore().lastOptions.params =
Ext.applyIf({start: 0, limit: 20}, searchResultsGrid.getStore().lastOptions.params);
}


Thanks again for helping

johnrembo
20 Mar 2009, 3:54 AM
That is something that is not properly handled by PagingStore.

Could you try if this fixes it:

Ext.override(Ext.ux.data.PagingStore, {
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;
}
var r = o.records, t = o.totalRecords || r.length;
if(!options || options.add !== true){
if(this.pruneModifiedRecords){
this.modified = [];
}
for(var i = 0, len = r.length; i < len; i++){
r[i].join(this);
}
if(this.allData){
this.data = this.allData;
delete this.allData;
}
if(this.snapshot){
this.data = this.snapshot;
delete this.snapshot;
}
this.data.clear();
this.data.addAll(r);
this.totalLength = t;
this.applySort();
if(!this.allData){
this.applyPaging();
}
if(r.length != this.getCount()){
r = [].concat(this.data.items);
}
this.fireEvent("datachanged", this);
}else{
this.totalLength = Math.max(t, this.data.length+r.length);
this.add(r);
}
options[this.paramNames.start] = this.start;
this.fireEvent("load", this, r, options);
if(options.callback){
options.callback.call(options.scope || this, r, options, true);
}
},
applyPaging : function(){
var start = this.start, limit = this.limit;
if((typeof start == 'number') && (typeof limit == 'number')){
var allData = this.data, data = new Ext.util.MixedCollection(allData.allowFunctions, allData.getKey);
if(start >= allData.getCount()){
start = this.start = allData.getCount() ? Math.floor((allData.getCount() - 1) / limit) : 0;
}
data.items = allData.items.slice(start, start + limit);
data.keys = allData.keys.slice(start, start + limit);
var len = data.length = data.items.length;
var map = {};
for(var i = 0; i < len; i++){
var item = data.items[i];
map[data.getKey(item)] = item;
}
data.map = map;
this.allData = allData;
this.data = data;
}
}
});



store.applyPaging();
store.fireEvent('datachanged', store);


I can confirm your fix doesn't work for the paging toolbar.

Two problems I've noted while using store.filter:
1. Page count always keeps the same as well as total records count on the paging toolbar.
2. Store shows current empty page instead of navigating to 1st page (if I filter 1 record for example)

you fix seems to always show the same 1st page - nothing else.

maybe additional even - "filterapplied" should be implied somehow, because I'm not sure if filtering is similar to data-changing in this case?

any more solutions?

whodat
30 Mar 2009, 12:41 PM
Hi Condor,

I'm using CheckboxSelection for my grid. The original implementation does not take into effect paging and keeping the state of which records are selected. So I've decided to add a dataIndex to my record 'initialCheckboxValue'



reader: new Ext.data.JsonReader({totalProperty: 'size', root: 'data', id: 'employeeId'},
['employeeName', 'dept', 'supervisor','teamLeader', 'employeeId', 'deptId', 'initialCheckboxValue'])
Altering this PagingStore class, I added the following method below to be called when a select and deselect event has been fired.


setCheckboxProperty: function(record, value){
var index=this.allData.items.indexOf(record);
this.allData.items[index].set('initialCheckboxValue', value);
this.fireEvent("datachanged", this);
},
What I don't know is if I should be firing the "datachanged" event when a record is updated? Or should I should I be calling another PagingStore class method instead.

Condor
30 Mar 2009, 10:09 PM
Wouldn't it be easier to use a CheckColumn (from the edit-grid example) or a SmartCheckBoxSelectionModel (http://extjs.com/forum/showthread.php?t=37588)?

whodat
31 Mar 2009, 6:59 AM
Wouldn't it be easier to use a CheckColumn (from the edit-grid example) or a SmartCheckBoxSelectionModel (http://extjs.com/forum/showthread.php?t=37588)?

I was using SmartCheckBoxSelection, but it does not keep the state of the record which was check for some reason when paging locally.

What SmartCheckboxSelection does is

var record = this.grid.store.getAt(rowIndex);

But that doesn't update the value in the allData mixedCollection, correct? So when I come back to that page, the checkbox gets unselected.

Have you used the combination?

whodat
31 Mar 2009, 7:01 AM
Wouldn't it be easier to use a CheckColumn (from the edit-grid example)

I'll try the check column in the editor grid example next. I don't like the idea of altering the paging store either. Would this CheckColumn keep the state when paging locally? I guess there's only one way to find out.

thanks for the response

galdaka
31 Mar 2009, 8:44 AM
checkboxmodel of the ExtJS not maintains the default state across paging, you need a plugin like this:

http://extjs.com/forum/showthread.php?p=296037

Greetings,

pvghotikar
17 Apr 2009, 5:50 AM
Hi,

Can you pls provide me the downloadable link for the code.
I tried the link on the first page...not able to open the zip file.

Prashant

Condor
17 Apr 2009, 5:56 AM
Use a different browser (IE corrupts downloads from the forum).

ash_rocks
21 Apr 2009, 8:34 AM
Hi Condor,

When I try to open the zip file, I get an error: Compressed (zipped) folder is invalid or corrupted..

Any idea what I need to do to open the zip folder?

Thanks,

hendricd
21 Apr 2009, 8:36 AM
As Condor mentioned previously, IE does not do well downloading zips from the Forum. Use Firefox instead.



Hi Condor,

When I try to open the zip file, I get an error: Compressed (zipped) folder is invalid or corrupted..

Any idea what I need to do to open the zip folder?

Thanks,

ash_rocks
21 Apr 2009, 8:37 AM
opened in firefox and it worked.

Thanks

ash_rocks
23 Apr 2009, 1:38 PM
Hi,

My application will load about 1500 records and I want to

1) load all the data locally
2) page the data locally

As I understand, I should be able to use the PagingStore for this.

When I use the PagingStore as below, it loads all the records instead of 15.

any ideas what I am doing wrong? Please help ASAP




ds = new Ext.ux.data.PagingStore({
proxy: new Ext.data.MemoryProxy(proxyData),
reader: new Ext.data.JsonReader({
root: "rows",
totalProperty: proxyData.TotalCount
},
product),
data: Ext.grid.gridData,
lastOptions: {
params: {
start: 0,
limit: 15
}
}
});
grid = new xg.EditorGridPanel({
store: ds,
columns: [...
],
bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 15,
displayInfo: true
})
ds.load({
params: {
start: 0,
limit: 15
}
});

Condor
23 Apr 2009, 9:30 PM
Use either a proxy or the data config option, but not both.

ash_rocks
24 Apr 2009, 6:33 AM
Hi Condor,

Many thanks.. I removed the Proxy option and now I am able to paginate locally. But I am running into another issue.. When I try to use the Filter option: I am getting an error on the below line in the PagingStore.js

this.proxy.load(p, this.reader, this.loadRecords, this, options);

Can I use the Filter the data locally using PagingStore across all the pages? If not, is there another plug-in that I need to use?

Thanks for your help.

Condor
24 Apr 2009, 7:35 AM
Ext.grid.GridFilters uses remote filtering by default (you need to set local:true in the config).

ash_rocks
24 Apr 2009, 9:33 AM
Thanks, Condor.. It works now. One question I have is that I do still see slow performance when rendering the grid. I am loading about 1500 records and there are about 6 columns.. Any suggestions as to how to improve performance?

Thanks for your help.

galdaka
24 Apr 2009, 12:35 PM
Thanks, Condor.. It works now. One question I have is that I do still see slow performance when rendering the grid. I am loading about 1500 records and there are about 6 columns.. Any suggestions as to how to improve performance?

Thanks for your help.

You are rendering all in (data) client. Your slow performance is normal. View with Firebug times with pagingStore and using remote proxy. May be this comparision can you help to take a decision about how method use in your appplication.

Greetings,

Condor
26 Apr 2009, 2:55 AM
Do you really need a pageSize of 1500? Most people won't look beyond 100 records.

As a rule of thumb (also depends on number of fields in record):
1. Below 1000 records: Use a normal grid.
2. Between 1000 and 5000 record: Use local paging (PagingStore).
3. More than 5000 records: Use remote paging.

whodat
26 Apr 2009, 4:30 AM
Do you really need a pageSize of 1500? Most people won't look beyond 100 records.

As a rule of thumb (also depends on number of fields in record):
1. Below 1000 records: Use a normal grid.
2. Between 1000 and 5000 record: Use local paging (PagingStore).
3. More than 5000 records: Use remote paging.

I dont know if his pageSize is 1500, rather than he has 1500 records in allData. I too have this issue. I was loading 1000+ records in the grid using the PagingStore and I noticed poor performance.

I wonder if I am doing anything wrong or if there is something I can do increase performance.

What I noticed was, that the 1st fetch to page 2 took quite long, while the subsequent fetches from the cache to page 3 & 4 were relatively quick.

Any advice?

Condor
26 Apr 2009, 10:07 PM
That's strange. Every page fetch should take the same amount of time (when allData is already loaded).

The only thing you have to watch out for is that you set the pageSize before you load the records (e.g. data+lastOptions). Otherwise the first load will still be really slow.

Condor
7 May 2009, 5:34 AM
New release:
v0.3: Fixed bug in SimplePagingStore and in getTotalCount (fixes PagingToolbar pagecount).

whodat
7 May 2009, 5:37 AM
New release:
v0.3: Fixed bug in SimplePagingStore and in getTotalCount (fixes PagingToolbar pagecount).

Hi Condor,

Does this mean, we no longer have to delete the lastParams when updating the grid with new data? As far as getTotalCount is concerned..

Condor
7 May 2009, 5:40 AM
Deleting lastParams before reload forces a load of all data from the server. Do you actually need this (not needed for local data)?

whodat
7 May 2009, 7:00 AM
Deleting lastParams before reload forces a load of all data from the server. Do you actually need this (not needed for local data)?
I only do this when I the grid's results are actually refreshed with new data from a new search.

Condor
7 May 2009, 7:20 AM
Then you need it.

The getTotalCount fix was to properly display the number of pages on the PagingToolbar when adding or removing records to/from the store.

sunilnicholas
11 May 2009, 2:13 PM
This worked perfectly... thanks!

deepblueli
13 May 2009, 11:06 PM
Found this when I came across problem of filtering in PagingMemoryProxy across many pages.

Thanks! This helped me a lot!

Btw, I am using it in ext 2.0.2 with gwt-ext 2.0.5. Work very well, except have to manually calling pagingtoolbar.updateInfo() when there is a refresh or data.

Dark@rth
20 May 2009, 3:02 PM
Anyone knows if this plugin is usefull for remote data? i hope it is... im stucked in paging and i dont know what else to do.

whodat
20 May 2009, 3:53 PM
Anyone knows if this plugin is usefull for remote data? i hope it is... im stucked in paging and i dont know what else to do.

This extension is used for local paging. With the PagingStore, you query the db and get all of the data and not the requested pageSize. The previous and next calls will get the next request pageSize from an internal collection within the PagingStore.

Not used for remote data. If you need remote paging, then just use one of Stores in Ext.
Ext.data.Store, Ext.data.JsonStore, etc. You will need to write server side code to handle next, previous page calls from the grid...

Dark@rth
21 May 2009, 7:09 AM
All right, thanks a lot. I think I realize how to fix a problem i had with the number of records shown in a grid and the paging, and it is done exactly how you tell me.

Good Luck and again Thanks.

Chods
4 Jun 2009, 3:12 AM
Hi

I am trying to use this JsonPagingStore so that i only fetch the record set once.
but I get a 411 error as there is no content being posted to the server. Any help appreciated thanks



this.store = new Ext.ux.data.JsonPagingStore({
pageSize: pageSize,
proxy: new Ext.ux.ActionMethodProxy({ /* custom proxy that works with a normal store */
actionUrl: actionMethodUrl,
ajaxTimeout: timeout
}),
reader: new Ext.data.JsonReader(
{
root: 'SomeRootProperty',
totalProperty: 'SomeTotalTotalCount'
},
this.fieldMap),

}
});

dolittle
8 Jun 2009, 5:10 PM
does it work with ext3?

Condor
9 Jun 2009, 11:52 PM
The same principle should still work for Ext 3, but the new Ext.Direct code might conflict with the PagingStore code.

I'll check if it needs any changes for Ext 3 (but I just returned from my holiday so I first have to process a lot of backlog).

mjlecomte
10 Jun 2009, 5:20 AM
The same principle should still work for Ext 3, but the new Ext.Direct code might conflict with the PagingStore code.

I'll check if it needs any changes for Ext 3 (but I just returned from my holiday so I first have to process a lot of backlog).

Welcome back Condor! :)

You probably already know, but there's a stickied thread for Ext 3 changes in the Ext 3 forum. That might be another good place to post anything you encounter if changes need to be made to get your code working for 3x.

markpele
14 Jun 2009, 4:38 AM
I'm trying to use this extension to get a similar behavior to the forum-search (http://www.extjs.com/deploy/dev/examples/form/forum-search.html) example.

I've modified the first combo in the combos (http://www.extjs.com/deploy/dev/examples/form/combos.html) example. I'm using ext3rc2.


var store = new Ext.ux.data.SimplePagingStore({
fields: ['abbr', 'state', 'nick'],
data: Ext.exampledata.states
});

var combo = new Ext.form.ComboBox({
width: 570,
pageSize: 2,
store: store,
displayField:'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
applyTo: 'local-states'
});
store.load({params: {start: 0, limit: 2}});

The search and typeAhead is only working in the current page.
When mode is not 'local' I'm getting 'this.proxy is undefined' error.

I probably don't understand how to use this extension and will appreciate any help.

Thanks

John Mathew
15 Jun 2009, 1:23 PM
Hi I am new to extJS.Can anyone tell me how to setup a local pagingstore?

Condor
16 Jun 2009, 2:31 AM
I'm trying to use this extension to get a similar behavior to the forum-search (http://www.extjs.com/deploy/dev/examples/form/forum-search.html) example.

I've modified the first combo in the combos (http://www.extjs.com/deploy/dev/examples/form/combos.html) example. I'm using ext3rc2.


var store = new Ext.ux.data.SimplePagingStore({
fields: ['abbr', 'state', 'nick'],
data: Ext.exampledata.states
});

var combo = new Ext.form.ComboBox({
width: 570,
pageSize: 2,
store: store,
displayField:'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
applyTo: 'local-states'
});
store.load({params: {start: 0, limit: 2}});

The search and typeAhead is only working in the current page.
When mode is not 'local' I'm getting 'this.proxy is undefined' error.

I probably don't understand how to use this extension and will appreciate any help.

Thanks

Your code tries to load the data twice (and fails the second time).

Use:

var store = new Ext.ux.data.SimplePagingStore({
fields: ['abbr', 'state', 'nick'],
data: Ext.exampledata.states,
lastOptions: {params: {start: 0, limit: 2}}
});
...
//store.load({params: {start: 0, limit: 2}});

@John Mathew:
You can use the same method.
1. Replace Store with PagingStore.
2. Add lastOptions to the store config.

ps. Do you really need to use XML data? JSON data is much faster!
Also, if you want to keep using XML data you should probably use this code (http://extjs.com/forum/showthread.php?p=38959#post38959) so it also works on Firefox, Opera and Safari.

Condor
16 Jun 2009, 11:38 AM
I created an Ext 3.0 version of PagingStore, which can be found here (http://www.extjs.com/forum/showthread.php?t=71532).

Natalie
17 Jun 2009, 12:16 AM
Great work Condor, thank you for that.

Your extension is solving all my paging problems and is soo easy to integrate :)

ajpfister
8 Jul 2009, 11:36 AM
Would you mind walking through how a grid would be refreshed w/ new data and the paging toolbar would be updated to accurately reflect the new data count? I can get the grid to refresh and show the new data but the paging toolbar shows always shows the first result. in my situation i'm using local json data.

thanks.

lopita
15 Jul 2009, 4:16 AM
Hi,

In the above example, the simplepaging store has data as "Ext.exampledata.states".
What does this signify as i am getting js error for this.

Thanks
Lopita

Condor
15 Jul 2009, 6:12 AM
It's example data from examples/form/states.js.

The Edge
21 Jul 2009, 2:57 AM
Hi Condor

I have been through this thread several times trying to find a hint to what my issue is but with no success.

I have created a pagingstore like this:

Store = new Ext.ux.data.PagingStore({
proxy: new Ext.data.HttpProxy({ url: 'Modules/System/DataLoad.aspx' }),
reader: new Ext.data.JsonReader({ root: "Rows", id: 'SCOID' },
[
{ name: 'ID', mapping: 'SCOID' },
'Title', 'ShortDescription', 'ImageURL', 'ReviewCount',
{ name: 'Rating', mapping: 'RatingAverage' },
'TotalReviews', 'LearningMethod'
]
),
lastOptions: {
params: {
start: 0,
limit: subTabSCOCount,
method: 'SCOLIBRARYLIST',
username: parent.Username
}
}
});Loaded the store like this:


Store.load({ params: { start: 0, tag: library.tag, limit: subTabSCOCount, method: 'SCOLIBRARYLIST', username: parent.Username },
callback: function(resizeBy, options, success) {
if (success == true) {
// do stuff
} else {
// do stuff
});
}
}
});Created a dataview and paging bar:


var pagingBar = new Ext.PagingToolbar({
pageSize: subTabSCOCount,
id: pageID + 'PagingBar',
store: Store,
autoload: true,
displayInfo: true,
margins: '10 10 0 0',
emptyMsg: '',
displayMsg: 'Displaying {0} - {1} of {2}',
cls: 'subTabbedPagingBar'
});

var storePanel = new Ext.DataView({
layout: 'anchor',
autoWidth: true,
cls: 'SubTabDataViewBackground',
id: dataViewer,
store: store,
tpl: template,
height: subTabPageHeight,
multiSelect: false,
itemSelector: 'div.wrap',
emptyText: '<div style="font-size: 9px; margin: 4px; color: #002277;">There is currently no content to display in this area. </div>',
loadingText: 'Loading...'
});

var panel = new Ext.Panel({
items: [
storePanel
],
bbar: pagingBar
});

panel.render(targetTab);
The issue is very simple, the Json is loaded fine, all records from the database, but when I click on the next button on the paging bar it tries to call the database again instead of using the local store.

What have I missed? I am at a complete loss to know what I have done wrong so any help would be great :)

Thanks in advance

Chris

Condor
21 Jul 2009, 3:12 AM
1. Remove the lastOptions config option. This is only needed for local data.
2. Move the tag, method and username parameters to baseParams.


var Store = new Ext.ux.data.PagingStore({
proxy: new Ext.data.HttpProxy({
url: 'Modules/System/DataLoad.aspx'
}),
reader: new Ext.data.JsonReader({
root: "Rows",
id: 'SCOID',
fields: [
{name: 'ID', mapping: 'SCOID'},
'Title', 'ShortDescription', 'ImageURL', 'ReviewCount',
{name: 'Rating', mapping: 'RatingAverage'},
'TotalReviews', 'LearningMethod'
]
})
});
...
Store.baseParams = {
tag: library.tag,
method: 'SCOLIBRARYLIST',
username: parent.Username
};
Store.load({
params: {
start: 0,
limit: subTabSCOCount
},
callback: function(resizeBy, options, success) {
if (success == true) {
// do stuff
} else {
// do stuff
}
}
});

lopita
21 Jul 2009, 4:09 AM
Hi,

How can i get the Current Page number and increment the page numbers dynamically for a Combo box pagination.Can anyone please help on this?

Thanks

Condor
21 Jul 2009, 4:16 AM
Current page data:

var d = combo.pageTb.getPageData();
alert('Current page: ' + d.activePage +
'\nNumber of pages: ' + d.pages +
'\nNumber of records: ' + d.count);

Navigate to other page:

combo.pageTb.onClick('next'); // or 'first', 'prev', 'last' or 'refresh'

lopita
21 Jul 2009, 4:22 AM
Thanks for the quick response.
Is there any other option for "pageTb".I am using 2.x version and using pageTb throws a js error as "pageTb is null or not an object".
Can you please suggest some other option?

Thanks

The Edge
21 Jul 2009, 4:31 AM
Hi Condor

Thanks for the prompt response, I did as you suggeted:


Store = new Ext.ux.data.PagingStore({
proxy: new Ext.data.HttpProxy({ url: 'Modules/System/DataLoad.aspx' }),
baseParams: { method: 'SCOLIBRARYLIST', username: parent.Username },
reader: new Ext.data.JsonReader({ root: "Rows", id: 'SCOID' },
[
{ name: 'ID', mapping: 'SCOID' },
'Title', 'ShortDescription', 'ImageURL', 'ReviewCount',
{ name: 'Rating', mapping: 'RatingAverage' },
'TotalReviews', 'LearningMethod'
]
)
});
Store.load({ params: { start: 0, tag: library.tag, limit: subTabSCOCount },
callback: function(resizeBy, options, success) {
if (success == true) {

} else {

});
}
}
});But still seem to have the same issue.

When I watch the console in Firefox the data is loaded correctly on the first load command, but when I click on the next arrow there is another call to the database, with only the baseParams as params causing it to fail. I understood that the pagingStore shouldn't call the database again until a full reload is required, is this correct? Do I need to modify the behaviour of the next button on the paging toolbar?

Many thanks

Chris

Condor
21 Jul 2009, 4:39 AM
Move "tag: library.tag" to the baseParams. Only supply start and limit parameters for load.

Condor
21 Jul 2009, 4:41 AM
Thanks for the quick response.
Is there any other option for "pageTb".I am using 2.x version and using pageTb throws a js error as "pageTb is null or not an object".
Can you please suggest some other option?

Thanks

The combobox paging toolbar is only created when you specify a pageSize.

Also, you have to wait until the list is initialized. This will be after the combobox is rendered (when you specified lazyInit:false).

k2_4_u
21 Jul 2009, 4:46 AM
This is a great plugin! It's working pretty well for me.
But I do have a problem in removing the data.

When I remove a record, the pagination is not corrected. The record gets removed from the current page. But the number of records in the current page also gets reduced by one. It should adjust the records from the next page into the current one.

Any idea?


grid.store.remove(grid.store.getById(id));

Also, when I manually click on Refresh button, everything gets set right.

Condor
21 Jul 2009, 5:09 AM
That is the way I designed it.

You could add a 'remove' listener to the store and call reload (or applyPaging+datachanged).

The Edge
21 Jul 2009, 5:24 AM
Many, many thanks Condor and an absolutely excellent plugin :)

Chris

lopita
21 Jul 2009, 7:58 AM
Need to display the proper current page like...on click of next from 1st page...Page should diplay as "2" of 3 and so on..
Can any one please help on this issue as i am unable to get the proper page number.


Thanks

Condor
21 Jul 2009, 9:28 AM
Need to display the proper current page like...on click of next from 1st page...Page should diplay as "2" of 3 and so on..
Can any one please help on this issue as i am unable to get the proper page number.


Thanks

Please explain... What seems to be the problem?

lopita
21 Jul 2009, 9:48 AM
Hi Condor,

The Problem is, on click of next and other buttons of the combo box toolbar, data is loading properly .But the Page number is set to what has been set in the baseparams.

On click of next or previous, i want to display the correct page number.
Also, can you tell me how to override the baseparams?Will that help?

Thanks

Condor
21 Jul 2009, 11:31 PM
The 'start' and 'limit' parameters shouldn't be set in the baseParams. They should be recalculated for every page (like the PagingToolbar normally does)!

chelflores
5 Aug 2009, 5:35 PM
tnx 4 sharing..:)

tdteti_
23 Oct 2009, 1:07 AM
Sorry Condor,
I putted this post in a incorrect place...

I think this is the correct place
I am trying to download the "PagingStore3_v0.4.1.zip (http://www.extjs.com/forum/attachment.php?attachmentid=14876&d=1247210611)" attached file, and it seems is failing (Error message: Posible cause - File transfer error). Could you attach it again, please?

The case is that I am doing the same type of combo (ExtJs 3.0) and my problem is the same (live-search). That search is only working over the current page to which the combobox is showing. It means, if I try to search a value to which is missing on the current page (although it exist dataset) that is not found and not filtered. I am seeing each time the paging (|<, < ,>, >|) buttons are pressed, the 'store' object is only loaded with the current page data and this is the reason the search only works over these data... I would need to solve it. It means, the search works over all dataset like with 'remote' (forum-search.js). Is that possible? Is there a solution through the information including in that file?

Thanks in advance for you help!
kind regards.

hallow
10 Jan 2010, 10:39 PM
I'm having the same problems as tdteti_. I'm using the Ext.ux.data.PagingStore to back an Ext.form.Combobox, with paging enabled.

When mode:'remote' is defined for the ComboBox, an ajax call is issued to filter the store on the server. When mode:'local', I don't get any paging at all.

Typeahead should search the full dataset for matches, filter the store to those records, and refresh the list -- but it doesn't appear to work that way. :(

Condor
10 Jan 2010, 11:10 PM
For mode:'local', did you include lastOptions in your pagingstore?


lastOptions: {params: {start: 0, limit: pageSize}},

Suresh
6 Apr 2010, 11:19 PM
Hi Condor,

I am having same problem with ComboBox and SimplePagingStore. On page load, pagination is not working, when click "refresh" on the paging toolbar it works perfectly. I know some where I am doing wrong, please correct me.

Code:




Ext.onReady(function(){

var dataArr = [];
for(i=1;i<=20;i++){
dataArr.push([i, 'Agent'+i]);
}

var dataStore = new Ext.ux.data.SimplePagingStore({
fields: ['id', 'name'],
data: dataArr,
lastOptions: {params: {start:0, limit:5}}
});

var mycombo = new Ext.form.ComboBox({
id:'mycmb'
,renderTo:'combo1'
,width:200
,hideOnSelect:false
,maxHeight:200
,store:dataStore
,triggerAction:'all'
,valueField:'id'
,displayField:'name'
,mode:'local'
,pageSize:5
,resizable: true
});
dataStore.load({params: {start: 0, limit: 5}});
});


Thanks,
Suresh

kreko
8 Apr 2010, 12:57 PM
Try this:



Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "../../ext22/resources/images/default/s.gif";
var dataArr = [];
for(i=1;i<=20;i++){
dataArr.push([i, 'Agent'+i]);
}
var dataStore = new Ext.ux.data.PagingStore({
// fields: ['id', 'name'],
// data: dataArr,

id : "dataStore"
, remoteSort : true,
// lastOptions: {params: {start:0, limit:5}},
reader : new Ext.data.ArrayReader( {
fields:[
{name:'id'},{name:'name'}
]
})
, autoLoad : true
});
dataStore .proxy = new Ext.data.PagingMemoryProxy(dataArr);
dataStore .on("beforeload", function (store, options)
{
if (!options.params) {
options.params = {};
};
Ext.apply(options.params, {});
Ext.applyIf(options.params, {
"start" : 0, "limit" : 5
});
});

var mycombo = new Ext.form.ComboBox({
id:'mycmb'
,renderTo:'combo1'
,width:200
,hideOnSelect:false
,maxHeight:200
,store:dataStore
,triggerAction:'all'
,valueField:'id'
,displayField:'name'
//,mode:'local'
,pageSize:5
,resizable: true
});
// dataStore.load({params: {start: 0, limit: 5}});
});

Condor
8 Apr 2010, 10:22 PM
@kreko: Why would you want to use PagingMemoryProxy instead of PagingStore (see post #1)?

ps. Suresh' problem was solved by adding lazyInit:false to the combobox config.

Disastro
10 Jul 2010, 4:20 PM
Thank you so much for sharing!
I'm gonna try it: I hope it will solve my problem of lag in server calls.


EDIT: Uff! Nothing to do!

That's the problem:
I should get a jsonstore with a proxy to a webservice. Its data should be shown 20 items at time, but I'd get them in a single call.
Can I use an Ajax request to get them and store them in an object that I'll use as data of a Ext.ux.data.PagingStore?

Sorry for my English and thanks in advance!

hallow
13 Oct 2010, 10:38 AM
I've currently got 2 problems I'm trying to work out for the PagingStore.

First is, I'd like the equivalent of autoLoad:false, so that my comboBox will trigger the store to hit the server and load all the data the first time. Right now if I have 20 comboboxes that have their own paging stores on a page, it tries to load them all at once, rather than on-demand. This kind of works if I set autoLoad to false and mode on my ComboBox to remote, but then it wants to filter server side rather than client side. I guess I'm looking for mode:'hybrid', where it will sort/filter/page locally, but load data from the server if the store hasn't been populated yet.

Second, there seems to be some issues with the ComboBox with typeAhead and paging. If I'm on page 8, and I filter with typeAhead, and my filter has less than 8 pages of records, I get nothing. If I backup to page 1, I'm good. If I type a filter that should have 2 pages of records, and I click the next page button, the page changes to 2 of 2, but it doesn't automatically change on filter. If I back the filter out, so all my records are available, I stay on page 2 of 2, even though it should be 1 of X. I'm just using the pageSize attribute in my ComboBox for the paging toolbar.

Any help would be appreciated.

diablo
21 Dec 2010, 1:23 AM
hi,

somebody still active on this topic? I have the following situation. A tab panel that holds 2 grids, one using pagingstore and the other one normal store. When I am accessing functions for the grid with normal store, the store is a instance of PagingStore. Is there a way to avoid this? Comes this from that PagingStore extends Store?

Thanks!

Condor
21 Dec 2010, 2:24 AM
That's an error in v0.5 and not in v0.4 (which this thread is for).

vorber
21 Feb 2011, 6:08 AM
I've made small modification in PagingStore for those who manipulate data in store:


insert: function(index, records) {
records = [].concat(records);
for (var i = 0, len = records.length; i < len; i++) {
this.data.insert(index, records[i]);
records[i].join(this);
if (this.allData) {
this.allData.insert(index + (this.start || 0), records[i]);
}
if (this.snapshot) {
this.snapshot.insert(index + (this.start || 0), records[i]);
}
}

this.fireEvent("add", this, records, index);
}


previously insert appended new records to allData, so index maintaining was lost.

Condor
21 Feb 2011, 6:17 AM
I already thought about that, but there is one thing you are missing:

The snapshot can contain a lot more records and the order can be completely different. This means that using 'index' is completely random.

It would be better to determine the record after which you are inserting the records and try lot insert the records in the snapshot after the same record.

vorber
21 Feb 2011, 7:01 AM
You right. Thanks for advice :)

necco
24 Mar 2011, 2:03 AM
How can I make both plug-ins to work together?
Now RowNumberer counts the rows for each page.
For example if the grid has 3 pages each of them with 22 records RowNumberer column shows only the numbers from 1 to 22 on each page... doesn't count entire grid 1 to 66 (the second page starts again from 1 to 22 like the third one).

franck.prevostat
14 Nov 2011, 1:15 AM
Hi,
It seemsPagingStore doesn't run with extjs v4.
I've got an error like:
members is undefined
members.extend = superclass; ext-all-debug.js (ligne 3375)

Have you try to run this extension with ExtJS v4 ?

Thank you,
Franck.

ash4aque
6 Dec 2011, 11:46 AM
I am using PagingStore for local pagination as my applicatoin need to have all the data from the first call,
as Search functionality is of more importance. I am using it as rendering all the data on switching the tab is costly.
It works fine but the moment I click next to show say next 50 records search breaks. Otherwise search is working properly from the first page. I need to have a exhaustive search for the all the data in store from every page. I am using store.filter('name', 'entered_key', true) on each key press. Please suggest any solutions.

Code:
var proxy = new Ext.data.HttpProxy({
url : 'list.json',
restful: false
});

------------------------------
var store = new Ext.ux.data.PagingStore({
reader: new Ext.data.ArrayReader({
fields: [
{name: 'active'},
{name: 'id'},
{name: 'startTime'},
{name: 'endTime'} ],
}),
proxy: proxy,
id: 'id',
baseParams: {params:{start: 0,limit: 50}},
listeners: {
load: function(){
fixMinHeight();
}
}
});
-----------------------------------------------
var userGrid = new Ext.grid.GridPanel({
store: store,
columns:[sm2,
{header: "", width:10, sortable: true, dataIndex: 'active', renderer:statusRenderer},
{id:'name', width:200, sortable: true, dataIndex: 'name'},
{id: 'startTime', align: 'right',sortable: true, dataIndex: 'startTime', renderer: },
{id: 'endTime', header: "End Time", align: 'right',sortable: true, dataIndex: 'endTime'
],
loadMask:true,
stripeRows: true,
sm:sm,
autoExpandColumn: 'name',
bbar: new Ext.PagingToolbar({
store: store,
autoScroll:true,
autoWidth:false,
hideBorders:true,
pageSize: 50,
displayInfo: true
}),
viewConfig: {
forceFit: true,
getRowClass: rowCssRenderer
},
listeners: {
cellclick: callback
}
});
userGrid.store.load({params:{start: 0, limit: 50}});

-------------------------------------------------------
...{
xtype:'textfield',
width:200,
listeners: {
render: function(f) {
f.el.on('keydown',function(){store.filter('name',e.target.value, true);},f,{buffer:250});
}
}
}...

-------------------------------------------

perseusy
8 Mar 2012, 7:49 AM
PagingMemoryProxy really limited every operation in "current page".....

Why not just enhance the MemoryStore to support paging?