PDA

View Full Version : Pagination not working (Ext JS 4.2.1)



arun_shank_r
21 Feb 2014, 2:55 AM
I'm trying to load an paginable grid using server response data. I posted a form through ajax and the server responded with the following JSON data. I'm trying to load the response data to the grid but records are added to the grid but the pagination component does not work. It just shows '0' of '0' page. Can someone help me out what am I doing wrong.

Post AJAX request
=============

var formData = Ext.encode(params);
Ext.Ajax.request({
url: '/itpmsPOC/itpms/payment/dailyFinancialReportByCarrier/search.htm',
method: 'POST',
headers: { 'Content-Type': 'application/json','Accept':'application/json' },
params: {page:1, start:0, limit:5},
jsonData: formData,
waitTitle:'Connecting',
waitMsg:'Sending data...',
success: function (response) {
gridPanel.add(display);
//Ext.Viewport.unmask();
res = Ext.decode(response.responseText, true);
//Ext.Msg.alert("response from server", res);
if(res !== null && typeof (res) !== 'undefined') {
display.store.loadRawData(res);
}
},
failure: function (response) {
Ext.Msg.alert('Response data FAILURE', response.responseText);
}
});

JSON response from server
===================
{"topics":[{"carrierId":"CASH","beginningARBalance":"200.00","endingARBalance":"500.00","totalDeposit":"100.00","acqCost":"10.00","grossMargin":"5.00","manualDeposit":"50.00"},{"carrierId":"CASH","beginningARBalance":"300.00","endingARBalance":"600.00","totalDeposit":"200.00","acqCost":"20.00","grossMargin":"10.00","manualDeposit":"60.00"},{"carrierId":"CASH","beginningARBalance":"400.00","endingARBalance":"600.00","totalDeposit":"300.00","acqCost":"30.00","grossMargin":"15.00","manualDeposit":"70.00"},{"carrierId":"CASH","beginningARBalance":"500.00","endingARBalance":"700.00","totalDeposit":"400.00","acqCost":"40.00","grossMargin":"20.00","manualDeposit":"80.00"},{"carrierId":"CASH","beginningARBalance":"905.00","endingARBalance":"903.00","totalDeposit":"900.00","acqCost":"90.00","grossMargin":"45.00","manualDeposit":"94.00"},{"carrierId":"CASH","beginningARBalance":"910.00","endingARBalance":"904.00","totalDeposit":"905.00","acqCost":"95.00","grossMargin":"50.00","manualDeposit":"95.00"}],"totalCount":10}


Model
=====

Ext.define('DataItem', {
extend: 'Ext.data.Model',
fields: ['carrierId', 'beginningARBalance', 'endingARBalance', 'totalDeposit', 'acqCost', 'grossMargin', 'manualDeposit']
});

Grid Panel
========

var store = null;
Ext.define('TPMSViewer.DataGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.datagrid',
initComponent: function() {
Ext.apply(this, {
store: Ext.create('Ext.data.Store', {
pageSize: 6,
model: 'DataItem',
//remoteSort: true,
proxy: {
type: 'ajax',
headers: { 'Content-Type': 'application/json','Accept':'application/json' },
noCache: false,
reader: {
type: 'json',
root: 'topics',
totalProperty: 'totalCount'
}
}
}),
loadMask: true,
columns: [
{ text: 'CARRIERID', dataIndex: 'carrierId', sortable: true },
{ text: 'BEGINNINGARBALANCE', dataIndex: 'beginningARBalance', align: 'center' },
{ text: 'ENDINGARBALANCE', dataIndex: 'endingARBalance', align: 'center' },
{ text: 'TOTALDEPOSIT', dataIndex: 'totalDeposit', align: 'center' },
{ text: 'ACQCOST', dataIndex: 'acqCost', align: 'center' },
{ text: 'GROSSMARGIN', dataIndex: 'grossMargin', align: 'center' },
{ text: 'MANUALDEPOSIT', dataIndex: 'manualDeposit', align: 'center' }
],
// paging bar on the bottom
bbar: {
xtype: 'pagingtoolbar',
pageSize: 6,
store: store,
displayInfo: true,
items:[
'-', {
text: 'Export'
}]
}
});
this.callParent(arguments);
}
});

scottmartin
21 Feb 2014, 7:34 AM
Please see the following based on your setup:
3qu

arun_shank_r
21 Feb 2014, 8:03 AM
Thanks Scott for your response.

The first page in the paginable grid should not be loaded through store proxy. The first page in the grid is loaded through a POST request to the server, which sends a JSON response back to Ext JS. I'll need to load the store based on the server response. How to do that, I tried store.loadRawData(Ext.decode(response.responseText,true)) but it does not help.

Once the first page is loaded in the grid, then I will need to use the pagination toolbar component to navigate across pages.

scottmartin
21 Feb 2014, 8:24 AM
If you use loadRawData, then you are bypassing the proxy and paging configs. You would need to use load/loadPage()

I am not sure I understand your requirement for a special ajax call? The response should be handled automatically as my example shows, or do you have a special requirement based on the response?

arun_shank_r
21 Feb 2014, 8:43 AM
Scott,

To be more clear, there will be a form where user will enter search criteria values and do a JSON post. The server will process the post request and generate a JSON response.

This is the code which post the form data as JSON to the server. If you see here, I am sending the params required for pagination as query parameters in the POST request. When the server sends the response it sends the totalCount also (total number of resultsets) in addition to the 5 records as specified in the 'limit' parameter. I am loading the store using the response data. This would load the first page data in the gris. Let me know if there is a better way to handle this kind of requirement.

var formData = Ext.encode(params);
Ext.Ajax.request({
url: '/itpmsPOC/itpms/payment/dailyFinancialReportByCarrier/search.htm',
method: 'POST',
headers: { 'Content-Type': 'application/json','Accept':'application/json' },
params: {page:1, start:0, limit:5},
jsonData: formData,
waitTitle:'Connecting',
waitMsg:'Sending data...',
success: function (response) {
gridPanel.add(display);
//Ext.Viewport.unmask();
res = Ext.decode(response.responseText, true);
//Ext.Msg.alert("response from server", res);
if(res !== null && typeof (res) !== 'undefined') {
display.store.loadRawData(res);
}
},
failure: function (response) {
Ext.Msg.alert('Response data FAILURE', response.responseText);
}
});

scottmartin
21 Feb 2014, 9:25 AM
As mentioned, loadRawData will bypass your config.
http://docs.sencha.com/extjs/4.2.2/source/Store.html#Ext-data-Store-method-loadRawData

Have a look at load / loadPage that call loadToPrefetch() to use your paging information.
http://docs.sencha.com/extjs/4.2.2/source/Store.html#Ext-data-Store-method-load
http://docs.sencha.com/extjs/4.2.2/source/Store.html#Ext-data-Store-method-loadPage

bhaskarunichiranjeevi
4 Jan 2016, 1:53 AM
Did you get any solution for this. If yes kindly share it pls. Even I am trying the same from many days. In your case I know the problem.


I'm trying to load an paginable grid using server response data. I posted a form through ajax and the server responded with the following JSON data. I'm trying to load the response data to the grid but records are added to the grid but the pagination component does not work. It just shows '0' of '0' page. Can someone help me out what am I doing wrong.

Post AJAX request
=============

var formData = Ext.encode(params);
Ext.Ajax.request({
url: '/itpmsPOC/itpms/payment/dailyFinancialReportByCarrier/search.htm',
method: 'POST',
headers: { 'Content-Type': 'application/json','Accept':'application/json' },
params: {page:1, start:0, limit:5},
jsonData: formData,
waitTitle:'Connecting',
waitMsg:'Sending data...',
success: function (response) {
gridPanel.add(display);
//Ext.Viewport.unmask();
res = Ext.decode(response.responseText, true);
//Ext.Msg.alert("response from server", res);
if(res !== null && typeof (res) !== 'undefined') {
display.store.loadRawData(res);
}
},
failure: function (response) {
Ext.Msg.alert('Response data FAILURE', response.responseText);
}
});

JSON response from server
===================
{"topics":[{"carrierId":"CASH","beginningARBalance":"200.00","endingARBalance":"500.00","totalDeposit":"100.00","acqCost":"10.00","grossMargin":"5.00","manualDeposit":"50.00"},{"carrierId":"CASH","beginningARBalance":"300.00","endingARBalance":"600.00","totalDeposit":"200.00","acqCost":"20.00","grossMargin":"10.00","manualDeposit":"60.00"},{"carrierId":"CASH","beginningARBalance":"400.00","endingARBalance":"600.00","totalDeposit":"300.00","acqCost":"30.00","grossMargin":"15.00","manualDeposit":"70.00"},{"carrierId":"CASH","beginningARBalance":"500.00","endingARBalance":"700.00","totalDeposit":"400.00","acqCost":"40.00","grossMargin":"20.00","manualDeposit":"80.00"},{"carrierId":"CASH","beginningARBalance":"905.00","endingARBalance":"903.00","totalDeposit":"900.00","acqCost":"90.00","grossMargin":"45.00","manualDeposit":"94.00"},{"carrierId":"CASH","beginningARBalance":"910.00","endingARBalance":"904.00","totalDeposit":"905.00","acqCost":"95.00","grossMargin":"50.00","manualDeposit":"95.00"}],"totalCount":10}


Model
=====

Ext.define('DataItem', {
extend: 'Ext.data.Model',
fields: ['carrierId', 'beginningARBalance', 'endingARBalance', 'totalDeposit', 'acqCost', 'grossMargin', 'manualDeposit']
});

Grid Panel
========

var store = null;
Ext.define('TPMSViewer.DataGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.datagrid',
initComponent: function() {
Ext.apply(this, {
store: Ext.create('Ext.data.Store', {
pageSize: 6,
model: 'DataItem',
//remoteSort: true,
proxy: {
type: 'ajax',
headers: { 'Content-Type': 'application/json','Accept':'application/json' },
noCache: false,
reader: {
type: 'json',
root: 'topics',
totalProperty: 'totalCount'
}
}
}),
loadMask: true,
columns: [
{ text: 'CARRIERID', dataIndex: 'carrierId', sortable: true },
{ text: 'BEGINNINGARBALANCE', dataIndex: 'beginningARBalance', align: 'center' },
{ text: 'ENDINGARBALANCE', dataIndex: 'endingARBalance', align: 'center' },
{ text: 'TOTALDEPOSIT', dataIndex: 'totalDeposit', align: 'center' },
{ text: 'ACQCOST', dataIndex: 'acqCost', align: 'center' },
{ text: 'GROSSMARGIN', dataIndex: 'grossMargin', align: 'center' },
{ text: 'MANUALDEPOSIT', dataIndex: 'manualDeposit', align: 'center' }
],
// paging bar on the bottom
bbar: {
xtype: 'pagingtoolbar',
pageSize: 6,
store: store,
displayInfo: true,
items:[
'-', {
text: 'Export'
}]
}
});
this.callParent(arguments);
}
});

almcaffee
11 Feb 2016, 3:11 PM
This is great in theory but just doesn't work for me. Tried 50 times, there must be something you are leaving out in this example. All i get is a page with a paging toolbar but the columns are scrollable showing all rows.