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

时间:2013-03-15 17:08:34

标签: extjs override paging

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

在我的窗口中,我有一个面板,其中包含用于过滤网格的表单。所有“过滤器”都作为参数在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);

2 个答案:

答案 0 :(得分:0)

你需要覆盖移动工具栏的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

答案 1 :(得分:0)

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

希望它有所帮助。

使用参数拨打电话时,只有一次。在以前的版本中,Sencha告诉使用baseParams,但我无法在较新的版本中找到它。所以我用这种方式使用了extraParams of Proxy:

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

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
        */
    }