this.proxy 未定义 EXT JS 分页

Question

我有一家商店:

var store = new Ext.data.JsonStore({
        root: 'list',
        fields: rec,
        totalProperty:'totalCount',
        pruneModifiedRecords:true
    });

并且想做分页。

我的分页工具栏：

var paging = new Ext.PagingToolbar({
        pageSize    :   limit,
        width       :   600,
        store       :   store,
        displayInfo :   true,        
        displayMsg  :   'Total: {2}, (Show:{0}-{1})',
        emptyMsg    :   "No data"
    });

和我的网格：

var grid = new Ext.grid.EditorGridPanel({
        region:'center',
        stripeRows: true,
        frame: false,
        border:false,
        loadMask: {msg : 'Loading...'},
        trackMouseOver:false,
        store: store,
        cm: cm,
        sm: sm,
        tbar:gridTbar,
        bbar:   paging,
        viewConfig: {enableRowBody:true,emptyText: 'no data'}
    });

当按下按钮时从数据库加载数据：

var limit= 100;
    function storeDoldur(){
        Ext.Ajax.request({
            url: '../project/listData.ajax',
            params:{
                date:date.getRawValue(),
                start:0, 
                limit:limit
            },
            success:function(response,options){
                var res= Ext.decode(response.responseText);
                if(res.success){
                    store.loadData(res);
                    grid.getView().refresh();
                    grid.doLayout();
                }
                else{
                    Ext.MessageBox.alert("result",res.message);
                }
                globalMask.hide();
            },
            failure: function(response,options) {
                globalMask.hide();
                Ext.MessageBox.alert(error);
            }
        });
    }

问题来了：

总计数为 108。前 100 个结果已成功显示，但当我按下一页按钮时，分机显示：

TypeError：this.proxy 未定义 ...ueUrl(this.proxy,e)){c.params.xaction=e}this.proxy.request(Ext.data.Api.actions[...

如何解决这个问题？

编辑：

var store = new Ext.data.JsonStore({
        root: 'list',
        **url: '../project/listData.ajax',**
        fields: rec,
        totalProperty:'totalCount',
        pruneModifiedRecords:true,
        autoLoad : false,           
    });

ajax 请求发布此参数：日期、开始、限制

我点击第二页按钮，在后端代码数据库中由于日期为空而返回空。第二页请求参数是起始值和限制值。不发送日期参数??

Answer 1

为了使分页工具栏正常工作，您的商店必须配置具有 url 属性的代理，以便当您单击工具栏上的下一个\上一个按钮时，商店可以从服务器获取所需的数据页。

在您的代码中，您正在发出单独的 Ajax 请求，因此您的商店不知道用于获取下一页的 url。

查看此处的示例 => http://docs.sencha.com/extjs/4.2.0/#!/example/grid/paging.html 并查看链接到的 paging.js 源代码该页面的顶部。这应该足以让您继续。

您还应该监听商店加载事件来处理数据的成功获取。

编辑

对于 ExtJS 3，您应该在商店配置对象中使用 baseParams (http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.data.Store-cfg-baseParams)。您还可以动态设置这些，因此在您的情况下，在 storeDoldur 函数而不是 Ajax 方法中，您将执行以下操作：

var limit= 100;
function storeDoldur(){
    store.setBaseParam('date', date.getRawValue());

    store.load({
        params: {
            start: 0,
            limit: limit
        },
        callback: function() {
        }
    });
}

再次强调，不要使用 Ajax 请求，而是使用带有代理的正确配置的存储，因为这是分页工具栏正常工作所需的。在上面的编辑中，需要设置一个额外的基本参数，以便在使用分页工具栏的下一个\上一个按钮时在后续请求中传递该参数。

请注意，在商店上调用加载时，我为回调函数添加了一个空存根，您可以使用它在从服务器返回时进一步处理响应 - http://docs.sencha.com/extjs/3.4 .0/#!/api/Ext.data.Store-method-load

您不需要使用最初使用的 Ajax 请求中的成功处理程序中的代码，因为将数据（包括使用分页工具栏的其他页面）加载到存储中将导致网格自动更新。