Override next and previous button paging toolbar sencha extjs 4.1

I have a problem with the paging toolbar in my app. My store is populated by a PHP script that converts a MySQL database table to JSON data.

In my window I have a panel with a form that I use to filter a grid. All the "filters" are passed in a store.load() call as parameters and the PHP script complete the query and return data.

My problem is that when I have some filters and I click on next button of paging toolbar my filter disappear and store is loaded without extra params. How can I send extra params in nextPage()/prevPage() call?

EDIT: I resolved using store.on('beforeload'), here's my solution:

store.on('beforeload', function(store, operation, opts){
   operation.params={
       // yuor params here
       param1: param1Value,
       param2: param2Value
   };
}, this);

Solution

You need to override moveNext and movePrevious methods of Paging toolbar, in those methods you can pass an object which contains all the custom params that you need to pass to PHP

/**
 * Move to the next page, has the same effect as clicking the 'next' button.
 */
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({
                // all the custom params should go here
                param1 : 'value1'
            });
        }
    }
}

This will easily fix your current problem, but if you want a generic fix where store will provide these custom params everytime when previous/next page is fetched from store then you can override the loadPage method and add custom params there

loadPage: function(page, options) {
    var me = this;

    me.currentPage = page;

    // add your custom params
    options = Ext.apply({
        param1 : 'value1'
    }, options);

    // Copy options into a new object so as not to mutate passed in objects
    options = Ext.apply({
        page: page,
        start: (page - 1) * me.pageSize,
        limit: me.pageSize,
        addRecords: !me.clearOnPageLoad
    }, options);

    if (me.buffered) {
        return me.loadToPrefetch(options);
    }
    me.read(options);
}

Reference:

http://docs.sencha.com/ext-js/4-1/source/Paging.html#Ext-toolbar-Paging

http://docs.sencha.com/ext-js/4-1/source/Store.html#Ext-data-Store-method-nextPage