Hello,
Here is another ExtJs blog. Recently I got a requirement for page size plugin in ExtJs grid. User can control number of records in the grid. It should be displayed in grid bottom toolbar. See the image below.
So we created a plugin for it by extending Ext Combo Box. See the code below.
Ext.ux.PageSizePlugin = function() {
Ext.ux.PageSizePlugin.superclass.constructor.call(this, {
store: new Ext.data.SimpleStore({
fields: ['text', 'value'],
data: [['50', 50], ['100', 100],['150', 150]]
}),
mode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
allowBlank: false,
triggerAction: 'all',
width: 50
});
};
After this extend Ext combo and add the required listeners.
Ext.extend(Ext.ux.PageSizePlugin, Ext.form.ComboBox, {
init: function(paging) {
paging.on('render', this.onInitView, this);
},
onInitView: function(paging) {
paging.add('-',
this,
'Items per page'
);
this.setValue(paging.pageSize);
this.on('select', this.onPageSizeChanged, paging);
},
onPageSizeChanged: function(combo) {
this.pageSize = parseInt(combo.getValue());
this.doLoad(0);
}
});
So our plugin is ready. Now add it to paging toolbar.
var pager = new Ext.PagingToolbar({
pageSize: 50,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
plugins: [new Ext.ux.PageSizePlugin()],
listeners: {
beforechange : function (pager, params ) {
}
}
});
Add this toolbar in bottom tool bar of the ExtJs grid.
After this we can use page size while reloading grid data store.
store.load({params:{limit: pager.pageSize}});
Use this limit parameter in your database query.
