Using Page Slider with AJAX json data in ExtJS 4

[Martin_Arrowsmith]

Hello experts,

I am having trouble getting my paging slider to work correctly with my ajax json data. The grid loads with all the data, instead of only the 10 elements at a time as specified in my "pageSize" parameter.

The slider buttons still respond, and I get a "loading" mask, but the entire data is always loaded. Can someone point out what I'm doing wrong? I only want 10 at a time, not the entire data. The code is posted below.

Ext.onReady(function(){

    Ext.define('Spyware', {
        extend: 'Ext.data.Model',
        idProperty: 'infection',
        fields: [
            {name: 'infection'},
            {name: 'lastseen', type: 'int'},
            {name: 'firstseen', type: 'int'},
            {name: 'hitsday', type: 'int'},
            {name: 'hitsweek', type: 'int'},
            {name: 'hitsweek', type: 'int'}
        ]
    });
    // Create data store for me.
    var weekStore = Ext.create('Ext.data.Store', {
        model: 'Spyware',
        remoteSort: true,
        pageSize: 10,
        autoLoad: true,
            proxy: {
            type: 'ajax',
            url: 'weekdata.json',
            reader: {
                root: 'week',
                type: 'json'
            }
        }

    });

   //-- Now create grid

    Ext.create('Ext.grid.Panel', {
        title:'Sliding Pager',
        store: weekStore,
        columns: [{
                id:'infection',
                text: 'Infection',
                sortable: true,
                dataIndex: 'infection',
                flex: 1
            },{
                text: 'Last Seen',
                sortable: true,
                dataIndex: 'lastseen',
                width: 75
            },{
                text: 'First Seen',
                sortable: true,
                dataIndex: 'firstseen',
                width: 75
            },{
                text: 'Hits Since Yesterday',
                sortable: true,
                dataIndex: 'hitsday',
                width: 75
            },{
                text: 'Hits Last Week',
                sortable: true,
                dataIndex: 'hitsweek',
                width: 75
            }],
        renderTo: 'grid-example',
        stripeRows: true,
        height:320,
        width:600,
        bbar: Ext.create('Ext.PagingToolbar', {
            pageSize: 10,
            store: weekStore,
            displayInfo: true,
            plugins: Ext.create('Ext.ux.SlidingPager', {})
        })
    });

}); 

[mitchellsimoens]

Sounds like you are using Ext JS 4.0.7 or older. 4.1.0 beta 1 seems to have fixed these issues.

[Martin_Arrowsmith]

Indeed I am. Glad I asked! Ill try this and get back.

[Martin_Arrowsmith]

Hi,

When I updated to the newer version, it still did not work. Any ideas if there is anything wrong with the code above ?

[barun17]

hi,

Me too having the same issue, Suggest some solution