Ext.ux.toolbar.PagingOptions

[arthurakay]

One of the extensions I always end up building is a PagingToolbar with an additional ComboBox for selecting the page size. I've done this a million times in Ext 3.x - but here's my attempt at building it in 4.x

I'm guessing that there's a few improvements that could be made... so any feedback is certainly welcome!

/**
 * @class Ext.ux.toolbar.PagingOptions
 * @namespace Ext.ux.toolbar
 * @extends Ext.toolbar.Paging
 * @constructor
 * @param {object} configObj
 */
Ext.define('Ext.ux.toolbar.PagingOptions', {
    extend: 'Ext.toolbar.Paging',

    getPagingItems: function() {
        var me = this,
            pagingButtons = me.callParent();

        if (!Ext.ModelManager.getModel('PageSize')) {
            Ext.define('PageSize', {
                extend: 'Ext.data.Model',
                fields: [{ name: 'pagesize' , type: 'int'}]
            });
        }

        if (!me.pageSizeOptions) {
            me.pageSizeOptions = [
                { pagesize: 10 },
                { pagesize: 25 },
                { pagesize: 50 },
                { pagesize: 100 },
                { pagesize: 250 },
                { pagesize: 500 }
            ];
        }

        pagingButtons.push({
            xtype: 'combobox',
            queryMode: 'local',
            triggerAction: 'all',
            displayField: 'pagesize',
            valueField: 'pagesize',
            width: 100,
            lazyRender: true,
            enableKeyEvents: true,
            value: me.pageSize,
            forceSelection: me.forceSelection || false,
            store: new Ext.data.Store({
                model: 'PageSize',
                data: me.pageSizeOptions
            }),
            listeners: {
                select: function(thisField, value) {
                    me.fireEvent('pagesizeselect', value[0].get('pagesize'));
                },
                keypress: function(thisField, eventObj) {
                    if (eventObj.getKey() !== eventObj.ENTER) { return false; }
                    me.fireEvent('pagesizeselect', thisField.getValue());
                }
            }
        });

        return pagingButtons;
    },

    initComponent : function() {
        var me = this;

        me.callParent();

        me.addEvents(
            'pagesizeselect'
        );
    }
}); 

Updates:
- 5/10/2011: Corrected name of "pagesizeselect" event
- 5/25/2011: Added condition on combo "keypress" to only fire event on ENTER key
- 12/21/2011: Added UX to GitHub
- https://github.com/arthurakay/Ext.ux....PagingOptions

[AlxH]

This is a great extension. In 3.x i used the pagesizeplugin in almost every grid.
What I like to see is a config option to set the predefined page sizes and an option to force to use the predefined sizes. E.g. pagesizeValues und forceSelection.

[arthurakay]

I could work that in there... I need to update the code above to reflect changes in the 4.0.0 API anyways. I'll post the updates when I get a chance.

[arthurakay]

I updated my original post to include:
- forceSelection config (defaults to false)
- pageSizeOptions config (JSON array of values)

I also removed the "regModel()" call, as that is deprecated in 4.0.0

[mitchellsimoens]

Here is my version. Basically just extracted the combobox out to it's own function to make it a bit more customizable. Did some other personal code touchups, we all have out own style

/**
 * @class Ext.ux.toolbar.PagingOptions
 * @namespace Ext.ux.toolbar
 * @extends Ext.toolbar.Paging
 * @constructor
 * @param {object} configObj
 */
Ext.define('Ext.ux.toolbar.PagingOptions', {
    extend : 'Ext.toolbar.Paging',

    getPagingItems: function() {
        var me            = this,
            pagingButtons = me.callParent();

        Ext.applyIf(me, {
            pageSizeOptions : [
                { pagesize : 10  },
                { pagesize : 25  },
                { pagesize : 50  },
                { pagesize : 100 },
                { pagesize : 250 },
                { pagesize : 500 }
            ]
        });

        pagingButtons.push(me.buildComboBox());

        return pagingButtons;
    },

    buildComboBox: function() {
        var me = this;

        Ext.define('PageSize', {
            extend : 'Ext.data.Model',
            fields : [
                { name : 'pagesize' , type : 'int'}
            ]
        });

        return {
            xtype           : 'combobox',
            queryMode       : 'local',
            triggerAction   : 'all',
            displayField    : 'pagesize',
            valueField      : 'pagesize',
            width           : 100,
            lazyRender      : true,
            enableKeyEvents : true,
            value           : me.pageSize,
            forceSelection  : me.forceSelection || false,
            store           : new Ext.data.Store({
                model : 'PageSize',
                data  : me.pageSizeOptions
            }),
            listeners       : {
                select   : function(combo, value) {
                    me.fireEvent('pagesizeselect', value[0].get('pagesize'));
                },
                keypress : function(combo) {
                    me.fireEvent('pagesizeselect', combo.getValue());
                }
            }
        };
    },

    initComponent : function() {
        var me = this;

        me.callParent();

        me.addEvents(
            'selectpagesize'
        );
    }
});

[tatacalu]

Thank you for this example.

[tatacalu]

Thank you for this example.
I wanted to ask if there is an error in both of the scripts:

             listeners       : {
                select   : function(combo, value) {
                    me.fireEvent('pagesizeselect', value[0].get('pagesize'));
                },
                keypress : function(combo) {
                    me.fireEvent('pagesizeselect', combo.getValue());
                }
            }

//...


me.addEvents(             'selectpagesize'         );

Shouldn't the event names coincide ?

Thanks!

[arthurakay]

Nice catch... yes that was a typo on my part.

I've fixed it in the original example.

[tatacalu]

Thank you for the reply.

I saw in ExtJS4 Class System that a new construct has been introduced for configuration options management:

config: {
option1: defaultValue1,
option2: defaultValue2
// , ... etc...
}

In conjunction with it I saw that you can use the following syntax:

constructor: function(config) {
//...
this.initConfig(config);
//...
return this;
}

I tried to modify the first script posted on this thread in order to have configuration management via the Ext4 way but failed. Also I saw that the initComponent function was called before the constructor function. Does that have anything to do with the asynchronous nature of the new class system ?

I took my information regarding this subject from http://dev.sencha.com/deploy/ext-4.0...ss_system.html but AFAIK it is still a work in progress.

Also I tried to call:

this.initConfig(config);
this.callParent();

in either order, in the constructor with no luck, strange JS errors kept popping up in Firebug.

Could you please show me a working example of the script with the aforementioned features ?

Thank you!

[AlxH]

I'm curious about this, too.
This seems to work:

constructor: function(config) {
        this.initConfig(config);
        Ext.apply(this,config);
        this.callParent(config);
        return this;
    } 

But if I understand the docs correctly, it should work without the "Ext.apply".