覆盖下一个和上一个按钮分页工具栏 sencha extjs 4.1答案

【问题标题】：Override next and previous button paging toolbar sencha extjs 4.1覆盖下一个和上一个按钮分页工具栏 sencha extjs 4.1
【发布时间】：2013-03-15 17:08:33
【问题描述】：

我的应用程序中的分页工具栏有问题。我的商店由将 MySQL 数据库表转换为 JSON 数据的 PHP 脚本填充。

在我的窗口中，我有一个面板，其中包含用于过滤网格的表单。所有“过滤器”都作为参数传入store.load() 调用，PHP 脚本完成查询并返回数据。

我的问题是，当我有一些过滤器并单击分页工具栏的下一个按钮时，我的过滤器会消失，并且在没有额外参数的情况下加载存储。如何在 nextPage()/prevPage() 调用中发送额外的参数？

编辑：我使用store.on('beforeload') 解决了，这是我的解决方案：

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

【问题讨论】：

标签： extjs overriding paging

【解决方案1】：

您需要覆盖分页工具栏的 moveNext 和 movePrevious 方法，在这些方法中您可以传递一个对象，该对象包含您需要传递给 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'
            });
        }
    }
}

这将很容易解决您当前的问题，但是如果您想要一个通用的修复程序，每次从商店获取上一页/下一页时，商店都会提供这些自定义参数，那么您可以覆盖 loadPage 方法并在那里添加自定义参数

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

参考：

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

【讨论】：

不起作用，我使用了一个参数来尝试此解决方案，当我单击“下一步”时，商店会在没有参数的情况下重新加载。我在上面的问题中发布了我的代码

【解决方案2】：

我不知道你是否找到了答案，但我遇到了同样的问题，这就是我发现的。

希望对你有帮助。

带参数调用时，只有一次。在以前的版本中，Sencha 告诉使用 baseParams，但我无法在较新的版本中找到它。所以我以这种方式使用了 Proxy 的 extraParams：

这是我用来过滤数据的表单按钮

text: 'Filter',
handler: function() {
        /*
        get the form
        get a record object and set its data
        */
        var form = this.up('form').getForm();
        var record = form.getRecord();
        form.updateRecord(record);

        for(name in record.data){
            if (record.data.hasOwnProperty(name))
                envelopeStore.setExtraParam(name, record.data[name]);
        }
        /*
        envelopeStore.getProxy().extraParams = record.data;
        *I have some constant params so I needed to add them in a loop as above
        *you can simply use this
        */

        envelopeGrid.child('pagingtoolbar').moveFirst(); 
        /*
        do not load store data. It does not change paging. go to first page instead
        */
    }

【讨论】：