Extjs not paging correctly - extjs

Question

I have incorporated paging into my code.. but my paging doesnt seem to be working correctly.
I am trying to display 3 result perpage.. but it showing all in one page and when you click next it repeating the same results.
Ext.require([
'Ext.data.*',
'Ext.grid.*'
]);
Ext.onReady(function(){
Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 3,
model: 'Book',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
url: 'sheldon-2.xml',
// the return will be XML, so lets set up a reader
reader: {
type: 'xml',
// records will have an "Item" tag
record: 'Item',
idProperty: 'ASIN',
totalRecords: '#total'
}
}
});
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
{text: "Title", width: 180, dataIndex: 'Title', sortable: true},
{text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
renderTo:'example-grid-group-v3',
width: 540,
height: 200,
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
});

Answer 1

The way it works is, you need to have a program (PHP or ASPX or some similar stuff) on the server that accepts paging information and sends out data in pages. In your case, it is a static XML file which will be returned in it's entirety when requested for. I am not sure if you can have all the data on the client side and still have ExtJS do the paging for you. You might want to do more research on different stores/proxies to find out if that is possible.
Buffered scrolling is another option for you if you want bring in all data from the server and render only the data that is shown currently.

Answer 2

Please move pageSize: 3 line into Ext.PagingToolbar object. Paging is handled on the server side.The client sends parameters to the server side, which the server needs to interpret and then respond with the approprate data. It seems sheldon-2.xml does not support paging and returns all records. See example in Ext.PagingToolbar documentation.