Overriding page input field in pagingtoolbar with extjs 4.2

Question

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?

Answer 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/

Ext.toolbar.Paging.override({
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);
    }

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

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

});

Answer 2

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.

Answer 3

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) {
                        me.store.inputItemPage({
                            // Enter params 
                        });
                    }
                }

            }
        }); 

    });

}

}