EXTJS: How to do pagination on client side after getting all data(100sof records)

Question

I want to implement pagination on client side after retrieving all records. I do not want to send start/end/limit parameter to server side.

Few blogs have suggested PagingMemoryProxy but it doesnt have good documentation.

I have EXTJS 7.3 version and rest service on back end

Answer 1

This is only an addition to Arthur Rubens answer. His answer will work if you are not using filters and sorters.

If you want to use filters or sorters you might want to use this store type (paging):

Ext.define('Fiddle.PagingStore', {
    extend: 'Ext.data.Store',
    alias : 'store.paging',

    proxy: {
        type        : 'memory',
        enablePaging: true
    },

    /**
     * filterchange allows us to add the local filters and sorters to the pageLoad,
     * when a filter on the store changes
     * @param config
     */
    constructor(config) {
        const me = this;

        me.callParent([config]);
        me.on('filterchange', me.loadPage, me, { args: [1, null] });
    },

    /**
     * updateSorters is the updaterFn for sorters.
     * Everytime we get a new SorterCollection we want to listen to `endupdate`, because
     * returning to the third state (ASC,DESC,null) does not fire any other event or triggers
     * any other method.
     *
     * @param {Ext.util.SorterCollection} sorterCollection
     */
    updateSorters(sorterCollection) {
        const me = this;

        sorterCollection.on('endupdate', me.loadPage, me, { args: [null, null] });
    },

    /**
     * extend loadPage mainly to add the sorters and filters to the options
     * This ensures a local page load with sorters and filters.
     * @param {number} [page=store.currentPage]
     * @param {object} [options={_filters,_sorters}]
     */
    loadPage(page, options) {
        const me = this;

        page = page || me.currentPage;
        options = options || {
            _filters: me.getFilters().items,
            _sorters: me.getSorters().items
        };

        me.callParent([page, options]);
    }
})

Answer 2

@Joe : You may have to override Ext.grid.plugin.BaseExporter.extractRows to use collection.getRange() instead of collection.getAt(i)

    extractRows: function(config, group, columns, collection) {
        var cmp = this.cmp,
            store = cmp.getStore(),

            /* declare data var */
            data = collection.getRange(),
            // len = collection.getCount(),
            len = data.length,
            
            lenCols = columns.length,
            rows = [],
            i, j, record, row, cell;

        for (i = 0; i < len; i++) {
            // use data var instead of collection
            // record = collection.getAt(i);
            record = data[i];
            //
            row = {
                cells: []
            };

            for (j = 0; j < lenCols; j++) {
                cell = this.getCell(store, record, columns[j]);
                row.cells.push(cell || {
                    value: null
                });
            }

            rows.push(row);
        }

        group.setRows(rows);
        this.extractSummaryRow(config, group, columns, collection);
    }

Answer 3

Something like this:

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: [
        'title', 'forumtitle', 'forumid', 'username', {
            name: 'replycount',
            type: 'int'
        }, {
            name: 'lastpost',
            mapping: 'lastpost',
            type: 'date',
            dateFormat: 'timestamp'
        },
        'lastposter', 'excerpt', 'threadid'
    ],
    idProperty: 'threadid'
});

Ext.create('Ext.data.Store', {
    storeId: "myStore",
    model: 'MyModel',
    autoLoad: true,
    proxy: {
        type: 'memory',
        enablePaging: true,
        reader: {
            type: 'json',
            rootProperty: 'topics'
        }
    },
    pageSize: 10,
    loadRemoteData: function () {
        Ext.Ajax.request({
            url: 'data.json',

            success: function (response, opts) {
                var obj = Ext.decode(response.responseText);
                this.getProxy().setData(obj);
                this.load();
            },

            failure: function (response, opts) {
                console.log('server-side failure with status code ' + response.status);
            },
            scope: this
        });
    }
});

//var paginStore = Ext.create('MyPagingStore');
//paginStore.loadRemoteData();

var grid = Ext.create('Ext.grid.Panel', {
    renderTo: document.body,

    margin: 20,
    width: 600,
    height: 320,
    style: 'border: solid gray 1px',

    store: 'myStore',

    dockedItems: [{
        xtype: 'pagingtoolbar',
        dock: 'bottom',
        store: 'myStore'
    }],

    columns: [{
        text: "Topic",
        dataIndex: 'title',
        flex: 1,
        sortable: false
    }, {
        text: "Author",
        dataIndex: 'username',
        width: 100,
        hidden: true
    }, {
        text: "Replies",
        dataIndex: 'replycount',
        width: 70,
        align: 'right'
    }, {
        id: 'last',
        text: "Last Post",
        dataIndex: 'lastpost',
        width: 150
    }],
    listeners: {
        render: function(grid) {
            grid.getStore().loadRemoteData();
        }
    }
});

Works with the following sample data:

{
  "totalCount": "6678",
  "topics": [
    {
      "title": "XTemplate with in EditorGridPanel",
      "threadid": "133690",
      "username": "kpr@emco",
      "userid": "272497",
      "dateline": "1305604761",
      "postid": "602876",
      "forumtitle": "Ext 3.x: Help",
      "forumid": "40",
      "replycount": "2",
      "lastpost": "1305857807",
      "lastposter": "kpr@emco",
      "excerpt": "Hi , \n \nI have an EditiorGridPanel whose one column i am using XTemplate to render and another Column is Combo Box Field .\nWhen i render the EditorGri..."
    },
    {
      "title": "IFrame error  "_flyweights is undefined"",
      "threadid": "133571",
      "username": "Daz",
      "userid": "52119",
      "dateline": "1305533577",
      "postid": "602456",
      "forumtitle": "Ext 3.x: Help",
      "forumid": "40",
      "replycount": "1",
      "lastpost": "1305857313",
      "lastposter": "Daz",
      "excerpt": "For Ext 3.3.0 using Firefox 4 & Firebug, the following error is often happening when our app loads:\n    \"e._flyweights is undefined\".\n   \n  Yet, this ..."
    },
    {
      "title": "Status bar error with IFrames",
      "threadid": "134120",
      "username": "Daz",
      "userid": "52119",
      "dateline": "1305857168",
      "postid": "604220",
      "forumtitle": "Ext 3.x: Bugs",
      "forumid": "41",
      "replycount": "0",
      "lastpost": "1305857168",
      "lastposter": "Daz",
      "excerpt": "Ext version tested:\n\n Ext 3.3.3\n\nAdapter used:\next\n \ncss used:\ndefault ext-all.css\n \nBrowser versions tested against:\nFF4 (firebug 1.7.1 installed)\n \n..."
    },
    ...
    ...
  ]
}