Hey... here is another one for everybody... As the standard paging toolbar of ExtJs 4 does not have function to change the page size of the data store, so I make a simple plugin for the paging toolbar. I believe there are many examples if you Google it, but just another sample to share though...
/** * Ext.ux.grid.PageSize */ Ext.define('Ext.ux.grid.PageSize', { extend : 'Ext.form.field.ComboBox', alias : 'plugin.pagesize', beforeText : 'Show', afterText : 'rows/page', mode : 'local', displayField: 'text', valueField : 'value', allowBlank : false, triggerAction: 'all', width : 50, maskRe : /[0-9]/, /** * initialize the paging combo after the pagebar is randered */ init: function(paging) { paging.on('afterrender', this.onInitView, this); }, /** * create a local store for availabe range of pages */ store: new Ext.data.SimpleStore({ fields: ['text', 'value'], data: [['5', 5], ['10', 10], ['15', 15], ['20', 20], ['25', 25], ['50', 50], ['100', 100], ['200', 200], ['500', 500]] }), /** * assing the select and specialkey events for the combobox * after the pagebar is rendered. */ onInitView: function(paging) { this.setValue(paging.store.pageSize); paging.add('-', this.beforeText, this, this.afterText); this.on('select', this.onPageSizeChanged, paging); this.on('specialkey', function(combo, e) { if(13 === e.getKey()) { this.onPageSizeChanged.call(paging, this); } }); }, /** * refresh the page when the value is changed */ onPageSizeChanged: function(combo) { this.store.pageSize = parseInt(combo.getRawValue(), 10); this.doRefresh(); } });
I have implemented this and it works but for some reason the combobox has a PagingToolbar on it.
ReplyDeleteAny ideas?
Thanks in advanced!
The plugin is for pagingtoolbar. So you need to apply the plugin to pagingtoolbar. What component did you apply to?
ReplyDeletehow to use this plug-in ? any simple sample ?
ReplyDeleteThanks !
ReplyDeleteThank you for your sharing, but after I add this plugin in the bbar, combobox shows on the right side(I'm using extjs4.2), how to let it show on the left(next to refresh button)?
ReplyDeleteGot a suggest from extjs forum, use the code as below to instead of the plugin code
ReplyDelete//paging.add('-', this.beforeText, this, this.afterText);
paging.insert(10,this.beforeText);
paging.insert(11,this);
paging.insert(12,this.afterText);
Hi, Fran,
ReplyDeleteI apologise for the late reply. Yes, you can do above method to insert the items. If the displayInfo is set to true, then the '->' (fill element is created by ExtJs). Thus the combobox is pushed to the end of the toolbar.
Cheers,
Elvis
In view that extends `Ext.grid.Panel` in `uses` add `Ext.ux.grid.PageSize`. Then in `initComponent` you can use something like:
ReplyDelete```
initComponent: function() {
this.callParent()
this.addDocked({
xtype: 'pagingtoolbar',
dock: 'bottom',
plugins: [new Ext.ux.grid.PageSize()],
store: this.getStore()
})
}
```