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,417
    Vote Rating
    201
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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
    Mar 2012
    Posts
    18
    Vote Rating
    1
    mamkash is on a distinguished road

      0  

    Default


    Pagination is working fine without filters. If I apply filters pagination is breaking. Individually both are working, if added 2 features, then pagination is breaking.

    local:true for filters is filtering the data but breaking pagination.
    if local:true is removed, pagination is working but filters are not applied on data.

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

      0  

    Default


    Hi,
    I am successful in making pagination work. Filters are added using extension Ext.ux.grid.FilterFeatures.js. When we enter value in filter textfield, filters are not getting applied.

    As you said in above thread, I applied the filters manually using method store.filter. It is working fine. But we need to make it work with column filtering.

    Thanks in advance.

  9. #9
    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!

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

      0  

    Default


    @mamkashHey check my upper post. Looks like it might give you some clue.