PageSize plugin for Paging Toolbar for ExtJs 4


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();
    }
});
Posted by Elvis Hsu on Sunday, May 22, 2011

8 comments :

  1. John MosesFriday, June 17, 2011

    I have implemented this and it works but for some reason the combobox has a PagingToolbar on it.

    Any ideas?

    Thanks in advanced!

    ReplyDelete
  2. Elvis HsuMonday, June 20, 2011

    The plugin is for pagingtoolbar. So you need to apply the plugin to pagingtoolbar. What component did you apply to?

    ReplyDelete
  3. UnknownWednesday, April 18, 2012

    how to use this plug-in ? any simple sample ?

    ReplyDelete
  4. UnknownWednesday, December 19, 2012

    Thanks !

    ReplyDelete
  5. Fran ChengThursday, April 24, 2014

    Thank 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)?

    ReplyDelete
  6. Fran ChengFriday, April 25, 2014

    Got a suggest from extjs forum, use the code as below to instead of the plugin code

    //paging.add('-', this.beforeText, this, this.afterText);
    paging.insert(10,this.beforeText);
    paging.insert(11,this);
    paging.insert(12,this.afterText);

    ReplyDelete
  7. Elvis HsuFriday, April 25, 2014

    Hi, Fran,

    I 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

    ReplyDelete
  8. NuxFriday, May 29, 2015

    In view that extends `Ext.grid.Panel` in `uses` add `Ext.ux.grid.PageSize`. Then in `initComponent` you can use something like:

    ```
    initComponent: function() {
    this.callParent()
    this.addDocked({
    xtype: 'pagingtoolbar',
    dock: 'bottom',
    plugins: [new Ext.ux.grid.PageSize()],
    store: this.getStore()
    })
    }
    ```

    ReplyDelete