Ext.ux.data.PagingStore [v0.5]

[Condor]

Ext 3 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.

The Ext.ux.data.PagingStore class is a drop-in extension for the Ext.data.Store class. Local paging should work directly after replacing the reference to Store with PagingStore (there are also similar replacements for DirectStore, JsonStore, XmlStore and ArrayStore/SimpleStore).

Example of a remote store:

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

Example of a local store:

var store = new Ext.ux.data.PagingArrayStore({
    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, {
    doRefresh: function(){
        delete this.store.lastParams;
        this.doLoad(this.cursor);    
    }
});

Note: In Ext 3.0 and 3.1 the doRefresh method is called 'refresh'.

Version history:
0.4:
- First release for Ext 3.0
0.4.1:
- Fixed destroy bug
- Last release for Ext 3.0 and 3.1
0.5:
- Only for Ext 3.2 (and up?).
- Added PagingGroupingStore (although I don't recommend using it).
- Added Ext.ux.PagingToolbar with doRefresh patch and support for adding/removing/clearing records.

The Ext 2.x version can be found here.

[galdaka]

Ext 3.0 natively only supports remote paging (the server needs to process the start and limit parameters).
...

Hi,

And where is the code?

Greetings,

[Condor]

Strange, my attachment must have gotten lost somewhere... I added it again.

[markpele]

Why did you choose the name lastOptions? I would choose something like localLoad which is the local analog to autoLoad. I'm asking because your choice of this name probably means that it is not a simple local analog.

Is it possible to combine remote and local stores?
I'm trying to load large sets of data from a remote server - 100 records
and use local paging of small pages with 4 records.
At start the store will load the first 100 records. The user will be able to page and see records 1-4, 5-8...97-100 locally but if he'll ask for the 101s record the store will automatically load the next 100 records from the server. If we use caching moving from record 100 to 101 should feel smooth.

[Condor]

1. lastOptions is not a property I created. It is already part of the current Store code and used to store the options used for the last load() call.

2. You would have to write some extra code for that.
- Detect if a load needs data that hasn't been loaded yet.
- Load the extra data using an Ajax request and create records from it using the reader.
- Join the records to the store and add them to allData.
- Apply paging and fire a datachanged event.

[828]

Condor,

Getting "zip file currupt" when downloading.

[Condor]

Internet Explorer can't be used to download forum attachments. Use any other browser (Firefox, Opera, Safari, Chrome etc.).

[galdaka]

Condor,

Getting "zip file currupt" when downloading.

http://extjs.com/forum/showthread.ph...982#post342982

Greetings,

[dhisnotnull]

this doesnt work in 3.0 Final

Ext.override(Ext.PagingToolbar, {
    onRefreshClick: function(){
        delete store.lastParams;
        this.doLoad(this.cursor);    
    }
});

should be

Ext.override(Ext.PagingToolbar, {
    refresh: function(){
        delete this.store.lastParams;
        this.doLoad(this.cursor);    
    }
});

Nice component by the way, helped me alot .

[Condor]

should be

Good catch. I adjusted the first post.