PDA

View Full Version : Pagination not working in ExtJs 4



varmaj80
30 Apr 2014, 2:15 PM
Hello,

I am trying to get a list of records from database and display them in my search results grid. But for some reason the pagination is not working. It is displaying all the records in the first page and the pagination tool bar shows Page 0 of 0, with previous and next buttons getting disabled. I know I am missing something in my code and I tried different ways but of no result.
My code:



this.dockedItems = [{
xtype: 'pagingtoolbar',
dock: 'bottom',
layout: 'hbox',
items: [{
store: myEmailStore,
displayInfo: true,
displayMsg: 'Displaying emails {0} - {1} of {2}',
emptyMsg: "No emails to display"
}, ]


}];
initComponent: function () {
var myEmailStore = Ext.create('First.store.Emails', {
autoDestroy: true
});
this.items = [{
xtype: 'firstgridpanel',
cls: 'gridList',
store: emailStore,
itemId: 'myEmailSearchResultsGrid',
columns: [{
header: 'Email ID',
width: 100,
dataIndex: 'emailId',
sortable: true
}, {
header: "Subject",
width: 170,
dataIndex: 'subject'
}, {
header: "Received Date",
width: 170,
dataIndex: 'receivedDtFormatted',
sortable: true
}, ]
}];

Ext.define('First.store.Emails', {
extend: 'Ext.data.Store',


requires: ['First.model.Email', 'First.EHelper', 'Ext.data.proxy.Ajax'],


model: 'First.model.Email',
autoLoad: false,
storeId: 'emails',
pageSize: 20,


proxy: {
type: 'ajax',
method: 'POST',
url: First.EHelper.getBaseUrl() + 'email/queryMymails',
enablePaging: true,
reader: {
type: 'json',
totalProperty: 'total',
root: 'data',
successProperty: 'success'
},
listeners: {
exception: function (proxy, response, operation) {
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.error,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});


On the Server Side, I am setting everything like the pagesize,list, etc in a Jason object and returning. On the server side I am getting all the correct values. Not sure what's happening once I return the Json object.
Any help/suggestions?..

Gary Schlosberg
30 Apr 2014, 3:56 PM
What does your JSON look like? Is this ExtJS 4.2.1?

jsakalos
30 Apr 2014, 10:23 PM
It is almost certain that:

your server ignores start and limit parameters sent from Ext and always returns all records
your server does not return total number of records in totalProperty (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.reader.Reader-cfg-totalProperty)

varmaj80
1 May 2014, 8:55 AM
This is Ext JS 4.2.1

My proxy looks like this.

Ext.define('First.store.Emails', {
extend: 'Ext.data.Store',
requires: ['First.model.Email', 'First.EHelper', 'Ext.data.proxy.Ajax'],

model: 'First.model.Email',
autoLoad: false,
storeId: 'emails',
pageSize: 20,

proxy: {
type: 'ajax',
method: 'POST',
url: First.EHelper.getBaseUrl() + 'email/queryMymails',
enablePaging: true,
reader: {
type: 'json',
totalProperty: 'total',
root: 'data',
successProperty: 'success'
},
listeners: {
exception: function (proxy, response, operation) {
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.error,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});
On the backend, I am getting the values for the totalProperty as 190 and root as 20.
and success as true.

So out of the 190 records, 20 records are getting displayed on the first page and that's it. The previous and next buttons are disabled and the page numbers show 0 of 0. Not sure what I am missing..

jsakalos
1 May 2014, 9:03 AM
Ok, so one thing seems to be fixed. Now, if you would define totalProperty:'total' the resulting json must look like this:


{"success":true, "total":190, "data":[...]}

varmaj80
1 May 2014, 12:00 PM
How can I make sure that the resulting json object is in correct format?. Is there a way I can check the json object in the proxy?

jsakalos
1 May 2014, 2:16 PM
Not in the proxy, the server must deliver a valid json. You can check it manually here: http://jsonviewer.stack.hu