ExtJS Paging Grid will not advance

Question

I am trying to implement a grid with a paging toolbar in ExtJS 5. I get the first page of data, however when advancing the grid will not update new data.

It appears that data.asp page is not being updated with a new starting value to update the .AbsolutePosition property of my recordset. So the grid keeps displaying the 1st page of information.

My code is below...

    var gridStore = Ext.create('Ext.data.JSonStore', {
         autoLoad: false,
         fields: [
             {name: 'field1', type: 'int'},
             {name: 'field2', type: 'int'}
         ],
         pageSize: 25,
         proxy: {
              type: 'ajax', 
              url: 'Data.asp',
              reader: {
                   type: 'json',
                   rootProperty: 'rows',
                   totalProperty: 'totalCount',
              }
         }
    });

    gridStore.load({
         params: {
               start: 0,
               limit: 25
         }
    });

    grid = Ext.create('Ext.grid.Panel', {
        renderTo: 'grid-Spec',
        store: gridStore,
        columns: [
            {text: 'Field 1', width: 10, sortable: true, dataIndex: 'field1'},
            {text: 'Field 2', width: 10, sortable: true, dataIndex: 'field2'}
        ],
        height: 100,
        width: 20,
        selModel: { mode: 'SINGLE' },
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: gridStore,
            dock: 'bottom',
            displayInfo: true
        }]
    });

Krzysztof Krzysztof · Accepted Answer · 2014-09-16T08:06:00

Your code has some typos, but in general it looks OK.

Problem may lay on server side - when using ajax proxy, you must implement paging on server side. If you have implemented paging on server side, use some developer tools (for example in Chrome) and see if page number is submitted correctly. You should see start/page number in address (eg: http://fiddle.jshell.net/echo/json/?_dc=1410854522824&page=2&start=5&limit=5).

I made fiddle: http://jsfiddle.net/seur2aLx/9/ you can compare your code to mine (note that Ext.ux.data.reader.Json is there only to fake some data for grid).

ExtJS Paging Grid will not advance

1 Answers