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

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) {
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: [{
store: strUsers,
dock: 'bottom',
displayInfo: tru`e ,
viewConfig: {}

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.

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 :(

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).

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

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

27 Jul 2012, 10:08 AM
Here are a few examples:


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.