Pagination is not updating the view when the next button is clicked - extjs

Question

The total number of rows is correctly showing in pagination but Pagination is not updating the view when the next button is clicked.
I'm new to Sencha. In Mysql, I'm returning all rows. So that I can limit in client side. If I limit the rows in backend, I cannot have all the rows in client side.
View: List.js
/*** This view is an example list of people.
*/
Ext.define('CRUD.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'home',
requires: [
'CRUD.store.Personnel'
],
title: 'Heroes',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
layout: 'fit',
fullscreen: true,
store: {
type: 'personnel',
},
columns: [
{ text: 'Name', dataIndex: 'name', sortable: true, flex: 1 },
{ text: 'Email', dataIndex: 'email', sortable: true, flex: 1 },
{ text: 'Phone', dataIndex: 'phone', sortable: true, flex: 1 }
],
bbar: {
store: {
type: 'personnel',
},
xtype: 'pagingtoolbar',
displayInfo: true
},
// columns: [
// { text: 'Name', dataIndex: 'name', flex: 1 },
// { text: 'Email', dataIndex: 'email', flex: 1 },
// { text: 'Phone', dataIndex: 'phone', flex: 1 }
// ],
listeners: {
select: 'onItemSelected',
},
});
Store: Personnel.js
Ext.define('CRUD.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
model: 'CRUD.model.User',
id: 'list',
fields: [
'name', 'email', 'phone'
],
// data: [
// { name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111" },
// { name: 'Worf', email: "worf.moghsson#enterprise.com", phone: "555-222-2222" },
// { name: 'Deanna', email: "deanna.troi#enterprise.com", phone: "555-333-3333" },
// { name: 'Data', email: "mr.data#enterprise.com", phone: "555-444-4444" }
// ],
autoLoad: {
start: 0,
limit: itemsPerPage
},
buffered: true,
pageSize: itemsPerPage,
remoteSort: true,
proxy: {
type: 'jsonp', //cross domain calls - json parser
url: 'http://localhost:8080/list',
enablePaging: true,
reader: {
type: 'json',
totalProperty: 'total'
},
},
// proxy: {
// type: 'memory',
// reader: {
// type: 'json',
// }
// },
});

Answer 1

bbar: {
store: {
type: 'personnel',
},
xtype: 'pagingtoolbar',
displayInfo: true
},
I have removed store inside bbar and it works. Thanks for being cooperative.

Answer 2

The way you're using the store, ExtJS will do a request every time you change the page, sending the page number parameter to the URL set to the store.
If you want to do client-side pagination using ExtJS, you must set your store's proxy type to memory, load your data into the store and then ExtJS Grid will handle pagination as you expect.
Do an Ext.Ajax.Request like that:
Ext.Ajax.request({
url: 'http://localhost:8080/list',
success: function(response) {
dataStore.setProxy({
type: "memory",
enablePaging: true,
data: Ext.JSON.decode(response.responseText) //here you need to adapt to your response structure
});
dataStore.load();
}
});

Answer 3

For cross domain, you can make a call to Ext.data.JsonP.request() method and process the response as shown in the code below:
Ext.data.JsonP.request({
url: 'data1.json',
success: function (response) {
var myData = [];
Ext.Array.forEach(response.data, function (item) {
myData.push({
name: item.name,
email: item.email,
phone: item.phone
});
});
store.setProxy({
type: "memory",
enablePaging: true,
data: myData
});
store.load();
}
});
Check this fiddle for complete working example.