how pagination in the ext grid will work - extjs

Question

I am using this article of architecture http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/
here is my Application.ResellerIroGrid.js
the pagination buttons are coming but no. of pages and pageno. is not coming .
Application.ResellerIroGrid = Ext.extend(Ext.grid.GridPanel, {
border:false
,cityname : ''
,columndataindex : ''
,fromdate:''
,todate : ''
,initComponent:function() {
var config = {
store:new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad :false
,method: 'GET'
,baseParams: {
_command:'getresellersiro'
,city:this.cityname
,columndataindex : this.columndataindex
,fromdate : this.fromdate
,todate : this.todate
}
,url: 'api/index.php'
// reader configs
,root: 'reseller'
,totalProperty: 'totalcount'
,idProperty: 'mobile',
fields: [
{name: 'caller'},
{name: 'designa'},
{name: 'mobile'},
{name: 'app_date'},
{name: 'transferto'},
{name: 'data_city'},
{name: 'AllocatedTo'},
{name: 'Parentid'},
{name: 'gotthru'}
]
})
,columns: [
{
id :'caller',
header : 'Caller',
width : 120,
sortable : true,
dataIndex: 'caller'
},
{
id :'designa',
header : ' Designation',
width : 100,
sortable : true,
dataIndex: 'designa'
},
{
id :'mobile',
header : 'Mobile',
height : 50,
width : 100,
sortable : true,
dataIndex: 'mobile'
},
{
id :'app_date',
header : ' Appointment Date',
width : 100,
sortable : true,
dataIndex : 'app_date'
},
{
id :'transferto',
header : ' Transfered To',
width : 100,
sortable : true,
dataIndex: 'transferto'
},
{
id :'data_city',
header : ' Data City',
width : 100,
sortable : true,
dataIndex: 'data_city'
},
{
id :'AllocatedTo',
header : ' Allocated To',
width : 100,
sortable : true,
dataIndex: 'AllocatedTo'
},
{
id :'Parentid',
header : ' Parent Id',
width : 100,
sortable : true,
dataIndex: 'Parentid'
},
{
id :'gotthru',
header : ' Appointment Type',
width : 100,
sortable : true,
dataIndex: 'gotthru'
}
]
,plugins :[]
,viewConfig :{forceFit:true}
,tbar :[]
,bbar: new Ext.PagingToolbar({
pageSize: 5,
store: this.store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
,height : 250
,width : 860
,title : 'Reseller Iro Grid'
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.ResellerIroGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
,onRender:function() {
this.store.load();
Application.ResellerIroGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
});
Ext.reg('ResellerIroGrid', Application.ResellerIroGrid);

Answer 1

You need to have a totalProperty attribute in your Store or JsonReader config and this property must be sent by ther server JSON.
Eg :
,totalProperty: 'totalCount'
,root: 'reseller',
,idProperty: 'caller'
Also, dont hardcode params in the store url property. You should use the baseParams config option for this :
method:'GET'
,baseParams: {
_command:'getresellersiro'
,city:this.cityname
[...]
}
,url:'api/index.php'
And of course you should have a PagingToolbar declared for your grid in the initComponent :
var pagesize = 5;
var store = new Ext.data.JsonStore({
[...]
,params:{start:0, limit:pagesize}
});
var paging_toolbar = new Ext.PagingToolbar({
pageSize: pagesize,
displayInfo: true,
emptyMsg: 'No data',
store: store
});
var grid = new Ext.grid.GridPanel({
store:store,
[...]
bbar:paging_toolbar
});