ExtJS plugin: PagingToolbarResizer

Well, this is my first ExtJS plugin. Though it is not an advanced plugin, I’m very happy and it is a big accomplishment for me!

The problem:

ExtJS PagingToolbar Component allows the developer to set a predetermined page size, which is the total number of records that will be displayed on the grid at once.

Let’s say we want to display 10,000 (ten thousand) records and we are going to use the paging feature. We are going to display only 50 records at once (per page). If you do the math, it is 200 pages to visualise. No problem so far.

The user User1 wants to see 100 records per page, and the user User2 wants to see 150 records per page, just like we can choose on Ebay search:

The solution/plugin:

For this reason, I implemented this plugin PagingToolbarResizer. It adds a combobox (dropdown) on the paging toolbar with some options for page size. It is totally customizable.

Let’s take a look at some configuration options:

• options: it can be a store or an array of integers. If you are going to retrieve the options list from database, you should use a store, otherwise you can use a simple array. Defaults to Defaults to [5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500, 1000].
• displayText: The message to display before the combobox (defaults to ‘Records per Page’).
• prependCombo: this flag indicates if you want to display the combobox before paging buttons or after them. Defaults to false.

And it is very easy to use:

        // paging bar on the bottom
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    var view = grid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }],
            plugins : [new Ext.ux.plugin.PagingToolbarResizer( {options : [ 5, 10, 15, 20, 25 ], prependCombo: true})]
        })

Links:

• The “official” plugin page
• You can check out a working example (it is the same example you are going to find at Sencha website – ExtJS examples – PagingToolbar). I just added the plugin.
• The thread at ExtJS forum
• GitHub Link

You can also download the plugin here:

http://loianegroner.com/extjs/PagingToolbarResizer.zip

I hope this will help someone!