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