PDA

View Full Version : EXT 4.2.1 GridPanel Paging Toolbar



whodat
14 Jan 2015, 4:46 PM
Hi I'm using EXTJS 4.2.1 and I have a view with 2 child components. A FormPanel and a GridPanel. The Form Panel is used to search for records, which are then displayed in the GridPanel.

The GridPanel contains remote paging. By default, the view is loaded with 15 records (the pageSize) and there are currently 3 pages worth of data (38 records).

The issue I'm having is, in the View's controller, I handle the search function, send the request to the backend and the results are shown in the GridPanel correctly. But the PagingToolbar still shows that there are 3 pages and 38 total records, even though the totalRecords property is sent back in the response.

How do I get the PagingToolbar to reflect the new set of data loaded into the store?




Ext.define('DDRM.controller.company.CompanyMaintenanceController', {
extend : 'DDRM.controller.DDRMBaseController',

.....
init : function() {
var me = this;

this.control({
'button[name="searchCompanies"]': {
click: this.searchForCompanies
}
});
},

searchForCompanies: function(button, event, eOpts) {
var me = this;

var form = button.up('form').getForm();
if (form.isValid()) {
form.submit({
submitEmptyText: true,
url: '/ddrm-war/companies/searchCompanies.json',
params : {
page: 1,
start : 0,
limit : 15
},
method: 'POST',
waitMsg: 'Searching Please Wait...',
success: function(form, action) {
var companyStore = me.getCompaniesStore();
companyStore.loadData(action.result.companies);

},
failure: function(form, action) {
Ext.Msg.alert('Company Search Error', 'Please contact your system administrator');
}
});
}
}
});




Ext.define('DDRM.store.Companies', {
extend : 'Ext.data.Store',
model : 'DDRM.model.Company',
pageSize: 15,
proxy : {
sortParam: 'sortField',
type : 'ajax',
url : '/ddrm-war/companies/getAllCompanies.json',
reader : {
type : 'json',
root : 'companies',
idProperty : 'symbol',
successProperty : 'success',
totalProperty: 'totalSize'
},
listeners : {
exception : function(proxy, response, operation) {
Ext.MessageBox.show({
title : 'DDRM Analysis System Error',
msg : 'Error getting companies data',
icon : Ext.MessageBox.ERROR,
buttons : Ext.Msg.OK
});
}
}
}
});




{
"companies": [
{
"symbol": "ABM",
"companyName": "ABM Industries Inc.",
"industry": "Business Services",
"dividendStatus": "Dividend Champion",
"yearsDividendIncreased": 48,
"lastUpdatedBy": "system",
"lastUpdatedDate": "2015-01-11T05:00:00.000+0000"
},
{
"symbol": "ADP",
"companyName": "Automatic Data Proc.",
"industry": "Business Services",
"dividendStatus": "Dividend Champion",
"yearsDividendIncreased": 40,
"lastUpdatedBy": "system",
"lastUpdatedDate": "2015-01-11T05:00:00.000+0000"
},
{
"symbol": "BRC",
"companyName": "Brady Corp.",
"industry": "Business Services",
"dividendStatus": "Dividend Champion",
"yearsDividendIncreased": 29,
"lastUpdatedBy": "system",
"lastUpdatedDate": "2015-01-11T05:00:00.000+0000"
},
{
"symbol": "CTAS",
"companyName": "Cintas Corp.",
"industry": "Business Services",
"dividendStatus": "Dividend Champion",
"yearsDividendIncreased": 32,
"lastUpdatedBy": "system",
"lastUpdatedDate": "2015-01-11T05:00:00.000+0000"
}
],
"totalSize": 4,
"success": true
}

whodat
15 Jan 2015, 9:22 AM
I've looked through the documentation and forum again. I was able to find a solution for my code above. I added the following lines to my success callback




companyStore.totalCount = action.result.totalSize;
Ext.ComponentQuery.query('pagingtoolbar')[0].onLoad();




searchForCompanies: function(button, event, eOpts) {
var me = this;

var form = button.up('form').getForm();
if (form.isValid()) {
form.submit({
submitEmptyText: true,
url: '/ddrm-war/companies/searchCompanies.json',
params : {
page: 1,
start : 0,
limit : 15
},
method: 'POST',
waitMsg: 'Searching Please Wait...',
success: function(form, action) {
var companyStore = me.getCompaniesStore();
companyStore.loadData(action.result.companies);
companyStore.totalCount = action.result.totalSize;
Ext.ComponentQuery.query('pagingtoolbar')[0].onLoad();
},
failure: function(form, action) {
Ext.Msg.alert('Company Search Error', 'Please contact your system administrator');
}
});
}
}