EXTJS:如何在客户端获取所有数据(100s条记录)后进行分页

yv5phkfx  于 2022-11-04  发布在  其他
关注(0)|答案(3)|浏览(169)

我想在检索所有记录后在客户端实现分页。我不想向服务器端发送开始/结束/限制参数。
很少有博客建议使用PagingMemoryProxy,但它没有很好的文档。
我在后端有EXTJS 7.3版本和其他服务

byqmnocz

byqmnocz1#

大概是这样的:

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

使用以下示例数据:

{
  "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..."
    },
    ...
    ...
  ]
}
oknwwptz

oknwwptz2#

@Joe:您可能需要重写Ext.grid.plugin.BaseExporter.extractRows才能使用collection.getRange()而不是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);
    }
dy2hfwbg

dy2hfwbg3#

这只是对Arthur Rubens答案的补充。如果你不使用过滤器和排序器,他的答案会起作用。
如果要使用筛选器或排序器,则可能要使用此存储类型(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]);
    }
})

相关问题