How to limit number of store results in grid?

Question

Using ExtJS 4.2 - I have an AJAX call populating the store with the entire set of results in JSON format (using loadRawData). I now need to limit the number of results being shown on the grid at a time. End goal is to implement client-side paging. I've tried using pagingmemoryproxy with not much luck.

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();
}

My controller uses the following AJAX call

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

        },

setting proxy type as 'pagingmemory' / 'pagingmemoryproxy' results in getting the following error - Uncaught TypeError: Cannot call method ‘substring’ of undefined — wushugene, Oct 03 '13 at 21:39

score 0 · Accepted Answer · edited May 23 '17 at 12:30

0

You need to add the pagingtoolbar to the grid.

Basically there are three things you need to do:

1) Add paging toolbar to the grid 2) The store used by the grid should be given the 'pageSize' attribute 3) If using loadrawdata, you need to update the toolbar using after you load it. use the loadPage function for that.

The following topic will get you started: How to manage PagingToolbar in Ext-js 4.2 correctly?

edited May 23 '17 at 12:30

Community

1
1

answered Oct 03 '13 at 14:49

Ee-P

78
4

Thanks for the pointer. I've added pagingtoolbar to my grid but it says page 0 of 0 after loading the entire store's contents into the grid. Using loadPage function afterwards ends up clearing the grid. I've set the pageSize inside the store. – wushugene Oct 03 '13 at 21:23

How to limit number of store results in grid?

1 Answers1