Results 1 to 3 of 3

Thread: Grid paging in two requests?

  1. #1
    Sencha Premium Member ethraza's Avatar
    Join Date
    Jun 2007
    Location
    Brazil
    Posts
    378

    Question Grid paging in two requests?

    I have this LoopbackJS REST webservice where the number of records need to be get in a separate request, so I'm trying to paging a grid with two ajax calls.

    What I have now, and is basically working is a beforeload that attach a onload function on the grid to do the request and ingraft it to the store's totalCount.


    On grid's store:
    Code:
    beforeload: function(store, oper, eopt) {
                if (oper._start === 0) {
                    var getSetCount = function() {
                        Ext.Ajax.request({
                            url: SpotHereAdm.config.Runtime.getServer()+'/api/spots/count',
                            params: {
                                'access_token': token,
                                'where': Ext.JSON.encode(filter.where)
                            },
                            method: 'GET',
                            success: function(response, opts) {
                                var obj = Ext.decode(response.responseText);
                                if (obj.count) {
                                    store.unAfter('load', getSetCount);
                                    store.totalCount = obj.count;
                                    Ext.ComponentQuery.query('#spotsgrid')[0].down('pagingtoolbar').onLoad();
                                }
                            }
                        });
                    };
                    
                    store.onAfter('load', getSetCount);
    }
    When the totalCount request finishs I can see the grid Total Records Count and Number of Pages been refreshed to the right numbers and when I go to another page, it loads it all right and I can see the records on the grid for a split second and so it automaticaly goes back to the first page and I just can't figure out why.

    Any ideas?
    LAMPE (Linux / Apache / MySQL / PHP / ExtJs)

  2. #2
    Sencha User
    Join Date
    Sep 2015
    Posts
    28
    Answers
    1

    Default

    Hello ethraza,

    You need to set store pageSize and while fetching response from server you can return total records and no of records you want.

    Below is the code which do exactly same stuff but different way.
    Code:
    Ext.define('MyApp.store.UserGridStore', {
        extend: 'Ext.data.JsonStore',
        storeId: 'UserGridStore',
        sorters: 'name',
        fields: [{
            name: 'id',
            mapping: 'id'
        }, {
            name: 'name',
            mapping: 'name',
            type: 'string'
        }, {
            name: 'firstName',
            mapping: 'firstName',
            type: 'string'
        }, {
            name: 'surName',
            mapping: 'surName',
            type: 'string'
        }, {
            name: 'email',
            mapping: 'email',
            type: 'string'
        }, {
            name: 'lastLoginDate',
            mapping: 'lastLoginDate',
            dateFormat: 'c',
            type: 'date'
        }, {
            name: 'enabled',
            mapping: 'enabled',
            type: 'boolean'
        }],
        constructor: function(config) {
            config = Ext.apply({
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        rootProperty: 'items',
                        totalProperty: 'total'
                    },
                    writer: 'json'
                }
            }, config);
            this.callParent([config]);
        }
    });
    Server will give below response with page all grid data in items element and total will have total records in whole table.
    Code:
    {
        'items': [{
            'id': 1,
            'name': 'admin',
            'surName': '',
            'firstName': '',
            'email': '[email protected]',
            'lastLoginDate': '2016-01-20 20:08:05'
            'enabled': true
        }, {
            'id': 2,
            'name': 'test',
            'surName': '',
            'firstName': '',
            'email': '[email protected]',
            'lastLoginDate': ''
            'enabled': true
        }],
        'total': 5
    }
    On toolbar beforechange event you can fetch data again and set the store and refresh grid.

    Code:
    Ext.getCmp('tbPaging').on('beforechange', function(tb, page) {
        // Your fetch record code goes here with page.
    });
    in above code page will give you current page. So if you click next then it will give you next page number.

    So using single request you can have pagesize and result and grid will use that from store.

    Thanks,
    Dhaval

  3. #3
    Sencha Premium Member ethraza's Avatar
    Join Date
    Jun 2007
    Location
    Brazil
    Posts
    378

    Default

    Hi. Thanks for answering.

    My pageSize is set, or my paging would not work at all.
    The problem is the webservice Im reaching does not send the total count within the itens call ('/api/spots'). The count endpoint gives me that info, but its in another request ('/api/spots/count').
    Because of that Im calling the "count" endpoint with an Ext.Ajax.request inside the grids store load event. Im even checking to do that call only on the first page...
    Maybe is that the problem? I need to reset the totalCount on every page load or it will be automaticaly reseted to 1 page? Need to try it latter!

    But if someone have some other idea...
    LAMPE (Linux / Apache / MySQL / PHP / ExtJs)

Similar Threads

  1. Paging Tool Bar forever disabled by multiple concurrent requests
    By Stevko (UCB) in forum Sencha GXT Bugs
    Replies: 0
    Last Post: 5 Nov 2013, 5:05 PM
  2. Replies: 2
    Last Post: 2 Dec 2011, 12:23 PM
  3. Replies: 24
    Last Post: 25 Oct 2011, 1:07 AM
  4. Replies: 4
    Last Post: 15 Apr 2011, 5:13 PM
  5. Managing HTTP Requests on Stores, TreeLoaders and Ajax Requests
    By j-joey in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 14 Jun 2010, 11:32 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •