PDA

View Full Version : The Paging Tool bar isn't working.



gigas01
27 Jul 2012, 9:33 AM
I want to add a paging toolbar and found some sample codes.

But it is not working :(

Even tough the row is over the pagesize(ex>10) it isn't going to the next page.

It is just listing under over and over...:(

can you help me with this?



{
xtype: 'gridpanel',
height: 400,
width: 1000,
title: 'Schedule List',
loadMask: true,
stripeRows: true,
store: strUsers,
tbar: [{
xtype: 'combobox',
store: companyData,
fieldLabel: 'Company Filter(Press Enter!)',
dataIndex: 'companyName',
displayField: 'companyName',
name: 'companyName',
enableKeyEvents: true,
listeners: {
keyup: {
fn: function(combobox) {
this.ownerCt.ownerCt.store.filterBy(function(
record) {
var name = record.data.companyName.toLowerCase();
if (name.indexOf(combobox.getValue().toLowerCase()) == 0) {
return true;
} else {
return false;
}
});
}
}
}
}],
columns: [{
xtype: 'gridcolumn',
width: 157,
dataIndex: 'companyName',
text: 'Company'
},
{
xtype: 'gridcolumn',
width: 154,
dataIndex: 'activityName',
text: 'Activity'
},
{
xtype: 'gridcolumn',
width: 146,
dataIndex: 'startTime',
text: 'Start Time'
},
{
xtype: 'gridcolumn',
width: 172,
dataIndex: 'endTime',
text: 'End Time'
}],
bbar: new Ext.toolbar.Paging({
pageSize: 10,
store: strUsers,
mode: 'local',
displayInfo: true
}),
/*
dockedItems: [{
xtype:'pagingtoolbar',
store: strUsers,
dock: 'bottom',
displayInfo: tru`e ,
pageSize:5
}],
*/
viewConfig: {}
}

Farish
27 Jul 2012, 9:45 AM
the pageSize config has to be set on the store; not on the paging toolbar. the paging toolbar just needs to know the store. that should fix it.

gigas01
27 Jul 2012, 9:51 AM
Thanks for the quick answer.

But um....it's weird

i changed the store data like this



var strUsers = Ext.create('Ext.data.Store', {
model: User,
autoLoad: {start: 0, limit:5},
pageSize: 5,
proxy: {
type: 'ajax',
url: 'http://localhost/ci_extjs_crud/index.php/user/ext_get_all',
method: 'POST',
reader: {
type: 'json',
root: 'rows'
}
}
});




now i have 3 pages but they are all same. I mean, the rows are still all listed on the 3 pages :(

Farish
27 Jul 2012, 9:54 AM
your backend now has to do the rest of the work. the store sends a request with start, limit parameters. the backend has to read these parameters and send the relevant records (and not all).

gigas01
27 Jul 2012, 10:02 AM
Sorry, I'm a beginner.


You mean I have change the gridpanel or the paging bar?

scottmartin
27 Jul 2012, 10:08 AM
Here are a few examples:
http://www.sencha.com/forum/showthread.php?229457

Scott.

Farish
27 Jul 2012, 10:14 AM
Neither of those two. what you have to change is your server side code which sends back the records to the store. On that side, you have to read the start and limit parameters which are part of the request sent by the store and send back records accordingly.

E.g. on page one, your start would be 0 and limit would be 5 (if pageSize: 5). You have to send back first five records. On page 2, your start would be 6 and limit 5 so you have to send back records 6 to 10 and so on.