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

im using extjs 4.2 ext.toolbar.paging , want have ability select items count on page, ie set pagesize of store.

my solution extend existing ext.toolbar.paging, maybe there easier solution? or solution can 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 paging items in 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 not field form not catch 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);         }     } });