PDA

View Full Version : Using Page Slider with AJAX json data in ExtJS 4



Martin_Arrowsmith
16 Jan 2012, 5:42 PM
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
16 Jan 2012, 9:04 PM
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
16 Jan 2012, 10:14 PM
Indeed I am. Glad I asked! Ill try this and get back.

Martin_Arrowsmith
24 Jan 2012, 10:26 AM
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
21 Jun 2012, 10:41 PM
hi,

Me too having the same issue, Suggest some solution