problem with PagingToolbar Extjs 4 - json

Question

I'm using ExtJS v4 for making some rich interfaces, the problem is that i encounter difficulties from time to time (something quite normal for a beginner in Extjs: p), the problem i encounter now, concern the pagination, in fact on my page i have all the records that are displayed, even after specifying the item by nbr of pages if possible to help me thanks
Ext.onReady(onReady);
function onReady() {
var itemsPerPage = 10;
var store = new Ext.data.JsonStore({
autoLoad: false,
pageSize: itemsPerPage,
proxy: new Ext.data.HttpProxy({
type: 'ajax',
url: '../Service.asmx/GetMyDvpt',
reader: {
type: 'json',
root: 'd',
//totalProperty: 'total',
idProperty: 'Id'
},
headers: {
'Content-type': 'application/json'
}
}),
fields: ['NOM_EXP', 'NOM_ESP', 'NOM_VAR', 'SURF_PG', 'DD_CYCLE_PROD']
});
store.load({
params: {
start: 0,
limit: itemsPerPage
}
});
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ dataIndex: 'NOM_EXP', header: 'NOM_EXP' },
{ dataIndex: 'NOM_ESP', header: 'NOM_ESP' },
{ dataIndex: 'NOM_VAR', header: 'NOM_VAR' },
{ dataIndex: 'SURF_PG', header: 'SURF_PG' },
{ dataIndex: 'DD_CYCLE_PROD', header: 'DD_CYCLE_PROD', flex: 1 }
],
renderTo: 'panel',
title: 'Dvpt Grid',
width: 570,
height: 350,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}]
});
}

Answer 1

You must create new instances of Ext JS objects with Ext.create, because objects instantiated with the new keyword won't take care of the Ext JS class system.
When you look at the load() method source code, you'll see how the configuration options get applied, and so would you:
store.load({
start: 0,
limit: itemsPerPage
});
Since the store has already been configured with pageSize, there's no need for the limit options, since it gets the pageSize as default.
store.load({
start: 0
});
I'd also recommend to have a look at the loadPage() method, that handles setting all the paging relevant parameters correctly:
store.loadPage(1);
Another enhancement is to set autoLoad to true, then you could omit the store load completely.
There is also no need to create a Ext.data.HttpProxy manually, since the configuration object specifies the ajax type and will take care of instantiating the correct proxy type for you.
Since you specified a JSON reader, there should be no need to set the HTTP accept header. Content-Type is anyway a response header and the corresponding request header would be Accept.
So your code should look like this:
Ext.onReady(onReady);
function onReady() {
var store = Ext.create('Ext.data.JsonStore', {
autoLoad: true,
pageSize: 10,
proxy: {
type: 'ajax',
url: '../Service.asmx/GetMyDvpt',
reader: {
type: 'json',
root: 'd',
totalProperty: 'total',
idProperty: 'Id'
}
},
fields: ['NOM_EXP', 'NOM_ESP', 'NOM_VAR', 'SURF_PG', 'DD_CYCLE_PROD']
});
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ dataIndex: 'NOM_EXP', header: 'NOM_EXP' },
{ dataIndex: 'NOM_ESP', header: 'NOM_ESP' },
{ dataIndex: 'NOM_VAR', header: 'NOM_VAR' },
{ dataIndex: 'SURF_PG', header: 'SURF_PG' },
{ dataIndex: 'DD_CYCLE_PROD', header: 'DD_CYCLE_PROD', flex: 1 }
],
renderTo: 'panel',
title: 'Dvpt Grid',
width: 570,
height: 350,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}]
});
}
When dealing with problems like this, I usually test the backend service with a REST client. There are many addons for different browsers available, for example RESTClient for Firefox or Advanced REST clinet for Chrome. Make sure that your service behaves correct without any UI, just by sending plain HTTP request with manually defined parameters. Only move to the GUI part when when everything works as expected.
For the GUI part I encourage you to study the source code of Ext JS within the API Documentation, it's well structured and documented and you'll learn a lot.
Since version 4 Ext JS comes with a MVC application framework, which simplifies the creation of large RIA apps a lot. Read more at the Application Architecure Guide.

Answer 2

Paging Toolbar supports remote paging by default. If local paging is required paging then reload store on 'datachange' and 'refresh' event fired.