Hybrid View

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    59
    Vote Rating
    4
    aghextjs is on a distinguished road

      3  

    Default Ext.ux.data.PagingStore - updated for Ext JS 4

    Ext.ux.data.PagingStore - updated for Ext JS 4


    Updating an Ext JS 3 app, finally forced me to need Condor's Ext.ux.data.PagingStore extension, since I couldn't find one amongst the 270+ posts on the thread at http://www.sencha.com/forum/showthre...gingStore-v0.5.

    Code is at: https://github.com/aghuddleston/Ext.ux.data.PagingStore

    The main difference from the Ext JS 3 version is that start, limit and page are no longer part of params, but are their own properties on the options config used during store load.

    Example remote store (note last options):
    PHP Code:
         var myStore Ext.create('Ext.ux.data.PagingStore', {
             
    model'User',
             
    pageSize3,
             
    lastOptions: {start0limit3page1},
             
    proxy: {
                 
    type'ajax',
                 
    url'url/goes/here',
                 
    reader: {
                     
    type'json',
                     
    root'rows'
                 
    }
             }
         }); 
    Example local store:
    PHP Code:
        var myStore Ext.create('Ext.ux.data.PagingStore', {
             
    model'User',
             
    pageSize3,
             
    proxy: {
                 
    type'memory',
                 
    reader: {
                     
    type'array'
                 
    }
             },
             
    datadata
         
    }); 
    My goal was to match the behavior of the Ext JS 3 version, so it should only request new data if params or extraParams changes, otherwise it is just paging through the existing store. To force a reload, make sure to delete store.lastParams before store.load is called.

    It is very lightly tested so far, with Ext JS 4.1.1. Feel free to fork, push/pull etc for any needed changes/enhancements.

    Update (8/8/14)
    - Version in GitHub tested with
    - Ext JS 4.1.1 (master branch)
    - Ext JS 4.2.1 (extjs-4.2-branch)

    By the way, the extjs-5.0-branch completely fails and does not work.
    Last edited by aghextjs; 8 Aug 2014 at 6:11 AM. Reason: Updating version info

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,079
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Thanks for sharing!

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    1
    mamkash is on a distinguished road

      0  

    Default


    Hi,

    I have tried using this local paging store. But it is not working as expected. Can you please provide me a sample working example.
    I am dynamically loading the store using store.loadData. Though page count is getting updated, all the records are displayed in all pages.

    delete this.store.lastParams;
    this.store.loadData(jsonData);
    var pagingObj = this.query('pagingtoolbar')[0];
    var current = pagingObj.store.currentPage;
    pagingObj.store.loadPage(current);

    Also I observed, this.store.lastParams is always an empty object. Can you please provide me some pointers.

    Thanks in advance.

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    59
    Vote Rating
    4
    aghextjs is on a distinguished road

      0  

    Default


    When you defined your store, did you include a pageSize property?

    Also, make sure you are setting store.lastOptions before loading your data.
    Code:
    store.lastOptions = {start:0, limit:50, page:1}; //where 50 is your pageSize
    delete store.lastParams;
    store.loadData(data);
    I'm doing something similar, but with store.loadRawData(jsonData) because my data needs to be processed through the proxy reader.

    Have you looked at the test files that are on GitHub? They might help you.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    1
    mamkash is on a distinguished road

      0  

    Default


    filters working if using Paging Store by defining as below, but pagination is not working. All records are shown in all pages.

    var filters = {
    ftype: 'filters',
    encode:false,
    local:true
    };
    grid.features = [filters];

    Please help me in how to work with filters using paging store.

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    59
    Vote Rating
    4
    aghextjs is on a distinguished road

      0  

    Default


    First question, does paging work if you do not have filters? If not, then try getting paging to work without filters first.

    By the way, the test file at https://github.com/aghuddleston/Ext....ngStoreTest.js includes a test of the store.filter() method. I do not have a test of the Ext.ux.grid.FiltersFeature extension, but it should work too, since underneath it is just building out the filters.

  7. #7
    Sencha User
    Join Date
    Dec 2013
    Posts
    10
    Vote Rating
    0
    elvisharcher is on a distinguished road

      0  

    Default


    Hey aghextjs, thanks for the great post. However there seem to be two bugs which affect the correct sorting and filtering behavior.
    1. In the filterBy method, you would need to applyPaging so that only the designated page will display, rather than the entire data set.
    2. When you do doSort, you would need to sort the snapshot as well, because when you turn the page, the filterBy method will work on the snapshot and therefore restore the unsorted data, which makes the sorting disappear after each page turning.
    These are what I found so far. And with them fixed, the class works perfect for me. Thanks again!

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    1
    mamkash is on a distinguished road

      0  

    Default


    Thanks for your early reply. It worked. But still facing problem with paging number updated in paging toolbar when filter applied.

  9. #9
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    59
    Vote Rating
    4
    aghextjs is on a distinguished road

      0  

    Default


    Thanks @elvisharcher

    I updated the code in the github repository to add the applyPaging to the filterBy method.

    I didn't see the second issue you described. I updated my unit tests to call filterBy and moved to the second page, and the set of data on page was the records I expected, based on the sorting. If you have an example I can try and look at it further.

    Thanks for the detailed feedback though. Greatly appreciated!

  10. #10
    Sencha User
    Join Date
    Dec 2013
    Posts
    10
    Vote Rating
    0
    elvisharcher is on a distinguished road

      0  

    Default


    Thanks @aghextjs. I'm not sure whether the second issue happens to everyone actually. Although I hope it happens only to me, if anyone else has the same, hopefully my words will give him/her a clue.


    PLUS: Not sure if you have tried with sorting on filtered data. That may do the trick.