ExtJS Paging toolbar with an ability to select items count per page - extjs

Question

Im using ExtJS 4.2 Ext.toolbar.Paging and I want to have an ability to select items count on a page, ie set pageSize of a store.
My solution is to extend existing Ext.toolbar.Paging, but maybe there is much easier solution? Or my solution can be improved?
Solution:
Ext.require([
'Ext.toolbar.Paging'
]);
Ext.define('Ext.lib.extensions.PortalPagingToolbar', {
extend: 'Ext.toolbar.Paging',
alias: 'widget.portalPagingToolbar',
alternateClassName: 'Portal.PagingToolbar',
/**
* Objects per page default
*/
objectsPerPageDefault: 25,
/**
* Objects per page text
*/
objectsPerPageText: 'Objects per page:',
/**
* Gets the paging items in the toolbar
* #private
*/
getPagingItems: function () {
var me = this;
return [
{
itemId: 'first',
tooltip: me.firstText,
overflowText: me.firstText,
iconCls: Ext.baseCSSPrefix + 'tbar-page-first',
disabled: true,
handler: me.moveFirst,
scope: me
},
{
itemId: 'prev',
tooltip: me.prevText,
overflowText: me.prevText,
iconCls: Ext.baseCSSPrefix + 'tbar-page-prev',
disabled: true,
handler: me.movePrevious,
scope: me
},
'-',
me.beforePageText,
{
xtype: 'numberfield',
itemId: 'inputItem',
name: 'inputItem',
cls: Ext.baseCSSPrefix + 'tbar-page-number',
allowDecimals: false,
minValue: 1,
hideTrigger: true,
enableKeyEvents: true,
keyNavEnabled: false,
selectOnFocus: true,
submitValue: false,
// mark it as not a field so the form will not catch it when getting fields
isFormField: false,
width: me.inputItemWidth,
listeners: {
scope: me,
keydown: me.onPagingKeyDown,
blur: me.onPagingBlur
}
},
{
xtype: 'tbtext',
itemId: 'afterTextItem',
text: Ext.String.format(me.afterPageText, 1)
},
'-',
{
itemId: 'next',
tooltip: me.nextText,
overflowText: me.nextText,
iconCls: Ext.baseCSSPrefix + 'tbar-page-next',
disabled: true,
handler: me.moveNext,
scope: me
},
{
itemId: 'last',
tooltip: me.lastText,
overflowText: me.lastText,
iconCls: Ext.baseCSSPrefix + 'tbar-page-last',
disabled: true,
handler: me.moveLast,
scope: me
},
'-',
{
xtype: 'tbtext',
itemId: 'objectsPerPageText',
text: Ext.String.format(me.objectsPerPageText, 1)
},
{
xtype: 'combo',
isFormField: false,
itemId: 'comboItemsCount',
name: 'comboItemsCount',
store: [
['10', '10'],
['25', '25'],
['50', '50'],
['100', '100'],
['250', '250'],
['500', '500'],
['1000', '1000']
],
width: 75,
listeners: {
scope: me,
change: me.onItemsPerPageChange
}
},
'-',
{
itemId: 'refresh',
tooltip: me.refreshText,
overflowText: me.refreshText,
iconCls: Ext.baseCSSPrefix + 'tbar-loading',
handler: me.doRefresh,
scope: me
}
];
},
// #private
onLoad: function () {
var me = this,
pageData,
pageSize,
currPage,
pageCount,
afterText,
count,
isEmpty;
count = me.store.getCount();
isEmpty = count === 0;
if (!isEmpty) {
pageData = me.getPageData();
pageSize = pageData.pageSize ? pageData.pageSize : me.objectsPerPageDefault;
currPage = pageData.currentPage;
pageCount = pageData.pageCount;
afterText = Ext.String.format(me.afterPageText, isNaN(pageCount) ? 1 : pageCount);
} else {
pageData = me.objectsPerPageDefault;
currPage = 0;
pageCount = 0;
afterText = Ext.String.format(me.afterPageText, 0);
}
Ext.suspendLayouts();
me.child('#afterTextItem').setText(afterText);
me.child('#inputItem').setDisabled(isEmpty).setValue(currPage);
me.child('#first').setDisabled(currPage === 1 || isEmpty);
me.child('#prev').setDisabled(currPage === 1 || isEmpty);
me.child('#next').setDisabled(currPage === pageCount || isEmpty);
me.child('#last').setDisabled(currPage === pageCount || isEmpty);
me.child('#comboItemsCount').setDisabled(isEmpty).setValue(pageSize);
me.child('#refresh').enable();
me.updateInfo();
Ext.resumeLayouts(true);
if (me.rendered) {
me.fireEvent('change', me, pageData);
}
},
// #private
getPageData: function () {
var store = this.store,
totalCount = store.getTotalCount();
return {
total: totalCount,
pageSize: store.pageSize,
currentPage: store.currentPage,
pageCount: Math.ceil(totalCount / store.pageSize),
fromRecord: ((store.currentPage - 1) * store.pageSize) + 1,
toRecord: Math.min(store.currentPage * store.pageSize, totalCount)
};
},
//#private
onItemsPerPageChange: function (combo, newValue) {
var me = this;
if(newValue) {
me.store.pageSize = newValue;
me.store.loadPage(1);
}
}
});