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个resut显示成功但是当我按下一页按钮ext时说：

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

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

Answer 1

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

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

看一下这里的例子=＆gt; 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请求，而是使用具有代理的正确配置的存储，因为分页工具栏需要正常工作。在上面的编辑中，设置一个额外的基本参数是必要的，因此当使用下一个\上一个按钮的分页工具栏时，它会在后续请求中传递。

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

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

this.proxy是未定义的EXTJS分页

1 个答案: