PDA

View Full Version : Paging doesn't work,need help :)



Baron89
16 Oct 2012, 5:50 PM
Hi all,would u guys pls take a look at my code,paging is not working,when i request data,the grid shows all the data returned from the server


com.oocl.ir4.bcr.findcr.form.SearchResultUi = Ext.extend(Ext.grid.GridPanel, {
title: 'Search Result',
store: new com.oocl.ir4.bcr.findcr.data.FindCmtyRules(),
autoHeight: true,
initComponent: function() {
this.columns = [
{
xtype: 'gridcolumn',
dataIndex: 'cmtyName',
header: 'Commodity Name',
sortable: true,
width: 150
},
{
xtype: 'datecolumn',
dataIndex: 'restrictionStart',
header: 'Restriction Start',
sortable: true,
width: 150,
//align: 'right'
},
{
xtype: 'datecolumn',
dataIndex: 'restrictionEnd',
header: 'Restriction End',
sortable: true,
width: 150
},
{
xtype: 'gridcolumn',
dataIndex: 'atvtAtLoc',
header: 'Activity at Location',
sortable: true,
width: 150
},{
xtype: 'gridcolumn',
dataIndex: 'markedDeleted',
header: 'Marked Deleted',
sortable: true,
width: 150
},{
xtype: 'gridcolumn',
dataIndex: 'markedOn',
header: 'Marked On',
sortable: true,
width: 150
}
];
this.bbar = {
xtype: 'paging',
pageSize: '2',
store: this.store,
buttonAlign: 'right',
autoWidth: true,
displayInfo: true,
displayMsg : 'Displaying records {0} - {1} of {2}',
emptyMsg : "No records to display",

};
com.oocl.ir4.bcr.findcr.form.SearchResultUi.superclass.initComponent.call(this);
}
});

store


com.oocl.ir4.bcr.findcr.data.FindCmtyRules = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
com.oocl.ir4.bcr.findcr.data.FindCmtyRules.superclass.constructor.call(this, Ext.apply({
root: 'data',
successProperty: 'success',
messageProperty: 'message',
proxy: new com.oocl.ir4.bcr.common.data.HttpProxy({
//method: 'POST',
url: 'http://localhost/test.json'
}),
autoLoad: false,
fields: [
{
name : 'cmtyName'
},{
name : 'restrictionStart'
},{
name : 'restrictionEnd'
},{
name : 'atvtAtLoc'
},{
name : 'markedDeleted'
},{
name : 'markedOn'
}

]
}, cfg));
}
});

data from the server


{
"message":"",
"data":[{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
},{
"cmtyName":"N/A",
"restrictionStart":"11 May 2012",
"restrictionEnd":"12 May 2012",
"atvtAtLoc":"HKG",
"markedDeleted":"true",
"markedOn":"true"
}],
"success":true,
"metaData":null,
"cacheName":"",
"markedDeletedRowCount":0
}

Baron89
16 Oct 2012, 5:53 PM
Hi all,total size is correct but show all the data in one page

vietits
16 Oct 2012, 6:32 PM
1. You should set pageSize to the store, not paging toolbar.
2. It is responsible of server script to return correct numbers of records (determined by pageSize) not paging toolbar. Grid will show all records in store even if the total count of records is larger than pageSize.

Baron89
16 Oct 2012, 8:25 PM
Hi Vietits,i added pageSize to store like below,but still does't work




Ext.namespace('com.oocl.ir4.bcr.findcr.data');
com.oocl.ir4.bcr.findcr.data.FindCmtyRules = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
com.oocl.ir4.bcr.findcr.data.FindCmtyRules.superclass.constructor.call(this, Ext.apply({
root: 'data',
successProperty: 'success',
messageProperty: 'message',
pageSize: '2',//add pageSize here,right?
proxy: new com.oocl.ir4.bcr.common.data.HttpProxy({
//method: 'POST',
url: 'http://localhost/test.json'
}),
autoLoad: false,
fields: [
{
name : 'cmtyName'
},{
name : 'restrictionStart'
},{
name : 'restrictionEnd'
},{
name : 'atvtAtLoc'
},{
name : 'markedDeleted'
},{
name : 'markedOn'
}

]
}, cfg));
}
});

Baron89
16 Oct 2012, 9:42 PM
this is how i call it:


store.load({ params: { start: 0, limit: 2} })

vietits
16 Oct 2012, 9:59 PM
this is how i call it:


store.load({ params: { start: 0, limit: 2} })

It is OK. Basing on this, your server script should return maximum 2 records each time of loading.

Baron89
16 Oct 2012, 10:05 PM
why it loads all the records??

vietits
16 Oct 2012, 10:24 PM
1. Sorry, you should set pageSize: 2 for your store, not by <store>.load({limit: 2}) because PagingToolbar will use this information for its own.

2.


Baron89,
why it loads all the records??

As I said, it is responsible of the server script to ruturn the correct number of records basing on the limit parameter which is determined by pageSize (in your case, it is 2). Looking at your code, you don't use a server script but instead use a static json. So each time store calls loading it always get back the whole data instead of 2. Though you set store.pageSize to 2 but if your server script returns 1000 records then store will contains 1000 records and they are all shown on the grid.

Baron89
16 Oct 2012, 10:57 PM
Hi Vietits,thx for the explaination,i thouht we can use static json for testing