Grid paging in two requests?

[ethraza]

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:

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?

[dgajjar]

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.

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.

{
    '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.

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

[ethraza]

Hi. Thanks for answering.

My pageSize is set, or my paging would not work at all.
The problem is the webservice I´m reaching does not send the total count within the itens call ('/api/spots'). The count endpoint gives me that info, but it´s in another request ('/api/spots/count').
Because of that I´m calling the "count" endpoint with an Ext.Ajax.request inside the grid´s store load event. I´m 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...