ExtJS grid page size – letting the user decide
July 28, 2009 23 Comments
Sometimes you’ll be using a Paging Toolbar on a grid and need to give the user the ability to change the number of records per page. One way of doing this is by adding a combobox to the toolbar:
var combo = new Ext.form.ComboBox({
name : 'perpage',
width: 40,
store: new Ext.data.ArrayStore({
fields: ['id'],
data : [
['15'],
['25'],
['50']
]
}),
mode : 'local',
value: '15',
listWidth : 40,
triggerAction : 'all',
displayField : 'id',
valueField : 'id',
editable : false,
forceSelection: true
});
We’ve set up a simple combo box which allows the user to choose between 15, 25 and 50 records per page. Now let’s set up a Paging Toolbar, and a listener to take action when the user changes the selection in the combo box:
var bbar = new Ext.PagingToolbar({
store: store, //the store you use in your grid
displayInfo: true,
items : [
'-',
'Per Page: ',
combo
]
});
combo.on('select', function(combo, record) {
bbar.pageSize = parseInt(record.get('id'), 10);
bbar.doLoad(bbar.cursor);
}, this);
Finally we’ll roll it all together into a Grid:
var grid = new Ext.grid.GridPanel({
//your grid setup here...
bbar: bbar
});
If the user needs to be able to enter her own page size, replace the ComboBox with an Ext.form.NumberField, and attach the event listener to the field’s ‘keypress’ event.
Ed Spencer 
Great tip. I do it slightly differently, but creating the bbar separately and referencing it works great.
Great tips, work well with a nnumber field too.
Any idea to put the number field before the refresh button and put the “changing page number” function on the refresh button click?
Finally I found an answer to my question.
////////////////////////// CODE /////////////////////////////
var field = new Ext.form.NumberField();
this.getBottomToolbar().insert(10,field );
field .on(‘change’,function(f,n,o) {
var tbar = this.getBottomToolbar();
tbar.pageSize = parseInt(n, 10);
}, this);
////////////////////////// /CODE /////////////////////////////
Doing this, i got a number field just before the refresh button. The on change function only changes the toolbar page size and then, when i click the refresh button the grid reload with the number i entered in my field.
Nice work shubakk
Hi Ed,
I’d like to use your idea here but having problem setting the initial pageSize value of the pagingTool bar. (tbar)
I found that if was not set this solution would not work properly in some cases.
Which event would I need to use to set the initial pageSize to 10 for example.
Thanks
Mikhail
I have used your example to add combo box to paging toolbaI have given 10 rows per page as default but it is actually loading 20 rows in the grid. The combo box is working fine but for the first time when it is loaded it is actually getting 20 rows from the store. I am not understanding what went wrong.Can you please help me in this issue.
the error iam getting is
Page 1 of 2 instead of page 1 of 4. it should actually display 10 per page but it is displaying 20 per page.
Here is my code
store.load({ params: { start: 0, limit: 10} });
var combo = new Ext.form.ComboBox({
name : ‘perpage’,
width: 40,
store: new Ext.data.ArrayStore({
fields: [‘id’],
data : [
[’10’],
[’25’],
[’50’]
]
}),
mode : ‘local’,
value: ’10’,
listWidth : 40,
triggerAction : ‘all’,
displayField : ‘id’,
valueField : ‘id’,
editable : false,
forceSelection: true
});
var bbar = new Ext.PagingToolbar({
store: store, //the store you use in your grid
displayInfo: true,
items : [
‘-‘,
‘Per Page: ‘,
combo
]
});
combo.on(‘select’, function(combo, record) {
bbar.pageSize = parseInt(record.get(‘id’), 10);
bbar.doLoad(bbar.cursor);
}, this)
And finally in the grid panel
bbar: bbar,
I got my answer. In order to restrict the initail load we have to pass the page size to both bbar and store.I had given pageSize: myPageSize to the bbar config object
This is obsolete to ExtJS 3.1 / 3.2
Please update it accordingly and add a fully functional demo / download
Thanks, very nice and handy post, not quite covered in the Ext-js Example…
Thanks everyone.. I am able to use this if you are using only one of these two tbar or bbar.. I need to implement both.. How these would get synchronized to each other with reference to this drop down of page size values..
Thanks a lot..
@DotNetWise – update it accordingly, add a fully functional demo, write my application for me, fix all my bugs. do it now. ???? Just be thankful he did something in the first place otherwise STFU and update it for 3.1/3.2 and post your update to Ed. Try helping out rather than just all up and demanding.
Hi
I want to add a bbar to the GridPanel dynamically without specifying in the
var grid = new Ext.grid.GridPanel({
//your grid setup here…
bbar: bbar // HERE
});
something like
if(!this.grid.getBottomToolbar())
{
var tbar = new Ext.PagingToolbar({
pageSize: pageSize,
store: store,
displayInfo: true,
autoScroll: true,
plugins: [filters]
});
this.dataGrid.bbar=tbar;
}
}
Then how I can do this please help??
I tried this way:
this.dataGrid.getBottomToolbar().hide();
and its able to hide the bbar
Worked very nicely. Thanks much for the article.
Pingback: extjstutorial.org
Pingback: Confluence: tools and snippets
Nice, simple straightforward idea, as is always the case with Ext, however for some noob users out there It would be nice to know which version of Ext this is for, otherwise, nice tut.
Hello, Ed.
How would this code change in 4.1? As-is it does not work.
The same code is not working in Ext JS 4.1.
Thank you 🙂
I was able to use this with ExtJS 4.2 by making following change to combo.on function:
combo.on(‘select’, function(combo) {
bbar.pageSize = parseInt(combo.value, 10);
bbar.doRefresh();
}, this);
The remaining code works as it is. The only other change I made was the way pagingToolbar is configured. Instead of stating “bbar : bar” in grid configuration, my code states something like:
dockedItems : [
{
xtype : bbar
}
]
P.S. This has been tested on Chrome Version 40.0.2214.111 (64-bit) on mac
Reblogged this on All about Microsoft .NET development blog.
Pingback: ExtJS grid page size – letting the user decide