PDA

View Full Version : Pagination for grid view while getting data from xml file



srautpyaa
17 Apr 2013, 6:27 AM
Hi All,

I have a requirement where i'm using to display the data from xml file into grid.

But here, pagination is not working.

Here is my code
Ext.define('countrycodes',{
extend: 'Ext.data.Model',
fields: [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{
name: 'placeName',
mapping: 'record > placeName'
},
'countryName','placeName','postalCode']
});
var store = Ext.create('Ext.data.Store', {
pageSize:'5',
model: 'countrycodes',
autoLoad: {
params: {
start: 0,
limit: 5
}
},
proxy: {
// load using HTTP
type: 'ajax',
url: 'countryCodes.xml',
// the return will be XML, so lets set up a reader
reader: {
type: 'xml',
// records will have an "Item" tag
root: 'country',
record: 'record',
idProperty: 'id',
totalRecords: '@total'
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
title: 'Country Postal Codes',
store: store,
stateful: true,
collapsible: true,
multiSelect: true,
stateId: 'countryPostalCodesGrid',
frame:true,
columns: [
{
header : 'Place',
flex:1,
sortable : true,
dataIndex : 'placeName'
},
{
header : 'Postal Code',
flex:1,
sortable : true,
dataIndex : 'postalCode'
},{
header : 'Country',
flex:1,
sortable : true,
dataIndex : 'countryName'
}
],
renderTo:'grid-view',
bbar: new Ext.PagingToolbar({
pageSize:5,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
})
});

my countryCodes.xml contains 20 records in it. The Pagination bar is showing 1-5 of 20 but im getting all the records displayed in the grid.

Please help me.

slemmon
18 Apr 2013, 8:36 PM
Since the data is loaded to the store all at once you might ajax the data down and then load it to the store manually using loadData().
The store can be set up with a memory proxy with enablePaging (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.proxy.Memory-cfg-enablePaging): true.

For a working example you might look at the source code here:
http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#sliding-pager