如何限制网格中存储结果的数量？答案

【问题标题】：How to limit number of store results in grid?如何限制网格中存储结果的数量？
【发布时间】：2013-10-09 09:49:20
【问题描述】：

使用 ExtJS 4.2 - 我有一个 AJAX 调用使用 JSON 格式的整个结果集填充存储（使用 loadRawData）。我现在需要限制一次在网格上显示的结果数量。最终目标是实现客户端分页。我尝试过使用 pagingmemoryproxy，但运气不佳。

Ext.define('TestApp.view.TestGrid' , {
extend: 'Ext.grid.Panel',
alias: 'widget.testgrid',

requires:[
    'TestApp.store.TestStore'
],

initComponent: function() {
    var me = this;
    this.store = Ext.create('Ext.data.Store', {
        model: 'TestApp.model.TestModel',
        proxy: {
            type: 'memory',             
            reader: {
                 type: 'json'
            },
        },  
        pageSize: 20
    });

// set the maxRows parameter based on the store's page size
    this.maxRows = this.store.pageSize;
    this.columns = this.buildColumns();
    this.bbar = Ext.create('Ext.PagingToolbar', {
        itemId: 'pagingToolbar',
        store: this.store,   
        dock: 'bottom',
        displayInfo: true
    });
    this.callParent();
}

我的控制器使用以下 AJAX 调用

Ext.Ajax.request({
        url: '/testing/test',
        method: "POST",
        jsonData : requestParams,
        timeout: 120000,    
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        success: function(response) {
            var resp = Ext.decode(response.responseText);
            var testStore = testGrid.getStore();

            var numResults = response.getAllResponseHeaders().resultlength;

            // this successfully loads results into store and populates grid 
            // with pagingtoolbar displaying page 0 of 0
            testStore.loadRawData(resp);  


            //testStore.loadPage(1);

        },

【问题讨论】：

“运气不佳”是什么意思？发布您的代码。
将代理类型设置为 'pagingmemory' / 'pagingmemoryproxy' 会导致出现以下错误 - Uncaught TypeError: Cannot call method 'substring' of undefined

标签： extjs extjs4 extjs4.2

【解决方案1】：

您需要将分页工具栏添加到网格中。

基本上你需要做三件事：

1) 向网格添加分页工具栏 2）网格使用的商店应该被赋予'pageSize'属性 3）如果使用loadrawdata，您需要在加载后更新工具栏。为此使用 loadPage 函数。

以下主题将帮助您入门：How to manage PagingToolbar in Ext-js 4.2 correctly?

【讨论】：

感谢您的指点。我已将 pagingtoolbar 添加到我的网格中，但在将整个商店的内容加载到网格中后，它显示第 0 页，共 0 页。之后使用 loadPage 函数最终清除网格。我已经在商店内设置了 pageSize。