1

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?

Keith Gaughan
  • 21,367
  • 3
  • 32
  • 30
user2246577
  • 21
  • 3

3 Answers3

1

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 
                        });
                    }
                }

            }
        }); 

    });

}

}

Akash Gupta
  • 11
  • 2
0

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);
    }
}

});

acteon
  • 429
  • 3
  • 7
  • if you can mark it as a valid answer it would make me happy :=) – acteon Jun 12 '14 at 11:44
  • 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". – acteon Jun 24 '14 at 15:16
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.

user4557463
  • 11
  • 1