[2.x] Ext.ux.data.PagingStore [v0.4]

[galdaka]

Is posible Live examples?

[andycramb]

@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]

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]

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]

Something like this I was thinking

pager.jpg

[techanix]

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]

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]

If you want to force repaging after adding records you should use:

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

[techanix]

Thank you pointing me to the right direction. Everything is working beautifully now

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]

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!

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.