How to override next and previous button of pagingtoolbar in ExtJS 4

Question

I would like to override the "next" and "previous" buttons of the pagingtoolbar in Extjs 4. When I click "next," I would like to fetch 50 records using a web service.

Answer 1

You can use the override function:

Ext.define('Override.toolbar.Paging', {
    override : 'Ext.toolbar.Paging',

    moveNext : function(){
        var me = this,
            total = me.getPageData().pageCount,
            next = me.store.currentPage + 1;

        if (next <= total) {
            if (me.fireEvent('beforechange', me, next) !== false) {
                me.store.nextPage();
            }
        }
    },

    moveLast : function(){
        var me = this,
            last = me.getPageData().pageCount;

        if (me.fireEvent('beforechange', me, last) !== false) {
            me.store.loadPage(last);
        }
    }
});

An alternative is that you make a listener for the beforechange event and return false in that function, and implement your own logic there.