2015-12-01-extjs-grid-page-size-letting-the-user-decide_001.js

Ext.define('Ext.toolbar.PagingComboToolbar', {
    extend: 'Ext.PagingToolbar',
    displayInfo: false,
    pageSize: 50,
    initComponent: function() {
        var me = this;
        this.store.pageSize = this.pageSize;
        var combo = new Ext.form.ComboBox({
            name: 'perpage',
            width: 75,
            store: new Ext.data.ArrayStore({
                fields: ['id'],
                data: [
                    ['10'],
                    ['20'],
                    ['50'],
                    ['75'],
                    ['100'],
                    ['150']
                ]
            }),
            value: this.pageSize,
            listWidth: 70,
            triggerAction: 'all',
            displayField: 'id',
            valueField: 'id',
            editable: false,
            forceSelection: true,
            listeners: {
                select: {
                    fn: function(combo, record) {
                        var newPagesize = parseInt(record.get('id'), 10);
                        this.pageSize = newPagesize;
                        this.store.pageSize = newPagesize;
                        this.store.loadPage(this.store.currentPage);
                    },
                    scope: this
                }
            }
        });
        Ext.apply(this, {
            items: ['Per page: ', combo]
        });
        this.callParent(arguments);
    }
});