ExtJs 5 Dynamic Grid pagination

Question

I am creating a dynamic grid (should be paginated) using the data from a POST rest request to server (code below). I am passing the pageid and pagesize to the server during the first request (on load) and it responds back with the appropriate data. I have docked a paging toolbar to grid and now I want to enable pagination on click of next, last etc of the pager. How do I POST a request to server and get back the appropriate data back to reconfigure the grid with the next page's data?

var screenResults = {};
screenResults.pageid =1;
screenResults.pagesize = 10;
screenResults = Ext.JSON.encode(screenResults);

 Ext.Ajax.request({
        url     : 'http://localhost/service/getGridData',
        method  : 'POST',
        timeout: 5000000,
        scope: this,
        dataType: 'json',
        jsonData: screenResults,
        success: function(response){
            var grid = Ext.getCmp("idSearchResultsGrid");
            var gridData = Ext.decode(response.responseText);

            var fields = gridData.data.fields;
            var newColumns = gridData.data.columns;
            var arr = gridData.data.data;

            var data = [];
            for(var i=0;i<arr.length;i++){
                var obj = arr[i].resultsMap;
                data.push(obj);
            }

            var newStore = Ext.create('Ext.data.Store', {
                storeId: 'DynamicGridStore',
                pageSize:10,
                fields: fields,
                data: data
                /*
                proxy: {
                    type: 'ajax',
                    url     : 'http://localhost/service/getGridData',
                    method  : 'POST',
                    timeout: 5000000,
                    jsonData: screenResults,
                    actionMethods: {
                            read   : 'POST'
                        }

                }
                */
            });
            //debugger;
            /*
            globalStore = newStore.load({
                params: {
                    start: 0,
                    limit: 10
                }
            });
            */

            var pagingBar = Ext.create('Ext.PagingToolbar', {
                pageSize: 10,
                store: newStore,
                dock: 'bottom',
                displayInfo: true
            });

            grid.removeDocked(grid.getDockedItems()[1]);
            grid.addDocked(pagingBar);
            grid.reconfigure(newStore, newColumns);
        },
        failure: function(response){
                console.log(response);
        }
    });

},

Greendrake Greendrake · Accepted Answer · 2015-07-02T01:00:47

First of all, you don't need to explicitly do AJAX calls like that. They will be done for you behind the scenes by the store's proxy — provided that the proxy is properly configured (yours is commented out at the moment).

Your task is very trivial and covered by multiple examples. Have a look at this one. Click on Details on the right hand side to see the code.

Also see Ext.toolbar.Paging documentation.

ExtJs 5 Dynamic Grid pagination

1 Answers