this.proxy 是未定义的 EXTJS 分页

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 请求发布此参数：日期、开始、限制

我单击第二页按钮，在后端代码数据库中返回 null，因为日期为 null。第二页请求参数是起始值和限制值。不发送日期参数？？

Answer 1

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

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

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

您还应该监听存储加载事件以处理成功获取数据。

编辑

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

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

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

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

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

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