Overriding page input field in pagingtoolbar with extjs 4.2

I need to detect changes on page change in page input field of pagingtoolbar in extjs 4.2. I am going through docs, but can't find any method for it. I have successfully overridden next, previous, &c., buttons, but can't find anything to override page input field. How would you go about this?

I have added afterrender listener on ExtJS Combobox component. You can add accordingly to override input field of paging toolbar. Here is the working code :

'afterrender' : function(thisCombo){

    thisCombo.getPicker().pagingToolbar.addListener('change', function() {

        var me = this;

        thisCombo.getPicker().pagingToolbar.child("#inputItem").addListener('specialkey', function(field, e) {
            if (e.getKey() == e.ENTER) { 

                /////   Do your modifications here 

                var inputItem = thisCombo.getPicker().pagingToolbar.child('#inputItem').getValue();

                total = me.getPageData().pageCount;

                if (inputItem <= total) {
                    if (me.fireEvent('beforechange', me, inputItem) !== false) {
                            // Enter params 





Ext.toolbar.Paging - Ext JS 4.2.4, Paging Toolbar is typically used as one of the Grid's toolbars: The width in pixels of the input field used to display and change the current page number. Stack Overflow Public questions and answers; Ext JS 4: Updating a Grid's PagingToolbar. 3. Overriding page input field in pagingtoolbar with extjs 4.2. 1.

this example my help

As in the code you can all of the texts given that they have setter etc http://jsfiddle.net/acteon/sZ3y6/1/

onLoad: function () {
    var me = this,
        pageData, currPage, pageCount, afterText, count, isEmpty;

    count = me.store.getCount();
    isEmpty = count === 0;
    if (!isEmpty) {
        pageData = me.getPageData();
        currPage = pageData.currentPage;
        pageCount = pageData.pageCount;
        afterText = Ext.String.format(me.afterPageText, (isNaN(pageCount) || (pageCount === 0)) ? 1 : pageCount);
    } else {
        currPage = 0;
        pageCount = 0;
        afterText = Ext.String.format(me.afterPageText, 1);

    me.child('#afterTextItem').setText("my precious text");
  // this one is the input field
    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);

    if (me.rendered) {
        me.fireEvent('change', me, pageData);


Ext.toolbar.Paging, Paging Toolbar is typically used as one of the Grid's toolbars: This token should be preserved when overriding this string if showing the total page count is​  Stack Overflow Public questions and Have you tried overriding the base fieldSubTpl property for Overriding page input field in pagingtoolbar with extjs 4.2. 0.

thanks for your help.

I have another issue, #inputItem field. What event handles the enter/return key? I need to override this function, because I have a disable/enable button.

Class Ext.PagingToolbar, Ext.PagingToolbar is a specialized toolbar that is bound to a Ext.data. store.​load({ params: { // specify params for the first page load if using paging start: 0, This token should be preserved when overriding this string if showing the total to the special clearing div rendered directly after each form field wrapper to provide. Ext JS Modern - API documentation from Sencha. Setting this property to true will result in setting the object's prototype to null after the destruction sequence is fully completed.

Ext.toolbar.Paging - GeoExt 3.1.0 Documentation, Ext.PagingToolbar Paging Toolbar is typically used as one of the Grid's toolbars: Default UI for Form Fields if the toolbar has a UI of 'footer' Default UI for  The Sencha icon used to navigate back to the documentation home page; The product menu drop-down button; Tabs of navigation trees for the API docs and guides; Current context navigation and tools is located on the right-hand side accessible via the gear icon. The context menu houses teh following: The global search input field

Ext.menu.Menu - Ext JS 4.2.0 - Sencha Docs, Ext JS 4.2.0 API Documentation from Sencha. Class documentation chart. container. data. dd. direct. dom. draw. enums. env. flash. form. fx. grid. layout. menu. An object containing properties which define named Ext.Action for this container and any descendant components.. An Action encapsulates a shareable, reusable set of properties which define a "clickable" UI component such as a Ext.button.Button or Ext.menu.Item, or panel header tool, or an Ext.grid.column.Action

Ext.chart.series.Gauge - Ext JS 4.2.0, Ext JS 4.2.0 API Documentation from Sencha. One is setting a store element into the Gauge and selecting the field to be used from that store. Another one is  Summary. The Ext namespace (global object) encapsulates all classes, singletons, and utility methods provided by Sencha's libraries. Most user interface Components are at a lower level of nesting in the namespace, but many common utility functions are provided as direct properties of the Ext namespace.

  • Thanks a lot! this is helpful
  • if you can mark it as a valid answer it would make me happy :=)
  • Click the green outlined checkmark to the left of the answer that solved your problem. This marks the answer as "accepted", and by extension the question as "has an accepted answer".