Question

使用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);

        },

Answer 1

您需要将pagingtoolbar添加到网格中。

基本上你需要做三件事：

1）将分页工具栏添加到网格中 2）网格使用的商店应该被赋予'pageSize'属性 3）如果使用loadrawdata，则需要在加载后使用工具栏进行更新。使用loadPage函数。

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

如何限制网格中的商店结果数量？

1 个答案: