动态加载无限网格的数据

Question

我已经使用Extjs 6.7创建了无限网格。其中，记录是从商店代理加载的。如何使用Ajax调用动态完成？

此外，还必须显示已加载记录和总记录的数量。类似于5 of 100。

我已经尝试过store.count()，但它返回的是总数，所以如何获取已加载的记录。

[store.getData().getCount()返回计数，但在8-9次迭代后它没有改变，似乎数据已在缓冲存储区中被覆盖。

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var store = Ext.create('Ext.data.BufferedStore', {

            fields: [
                'firstName', 'lastName',
                {
                    name: 'id',
                    type: 'int'
                }],

            leadingBufferZone: 5,
            pageSize: 1,
            remoteSort: true,
            autoLoad: false,
            proxy: {
                type: 'ajax',
                url: 'https://llbzr8dkzl.execute-api.us-east-1.amazonaws.com/production/user',
                reader: {
                    rootProperty: 'users',
                    totalProperty: 'totalCount'
                }
            }
        });

        Ext.create('Ext.grid.Panel', {

            renderTo:Ext.getBody(),
            id: 'myGrid',               
            title: 'Infinite Grid',
            width: 650,
            height: 500,
            store: store,
            scrollable: true,
            features: {
                ftype: 'grouping'
            },
            plugins: {
                gridfilters: true
            },

            columns: {
                defaults: {
                    filter: {
                        type: 'string'
                    }
                },
                items: [{
                    text: 'First Name',
                    width: 150,
                    dataIndex: 'firstName'
                }, {
                    text: 'Last Name',
                    width: 150,
                    dataIndex: 'lastName'
                }, {
                    text: 'Id',
                    width: 50,
                    dataIndex: 'id',
                    filter: {
                        type: 'number'
                    }
                } ]
            }
        });
    }
});

请提供任何提示或示例。小提琴可用here。

Answer 1

您可以获得类似这样的记录数：

store.getData().length

但是问题是先前下载的数据被删除（在我的示例中为〜250项）

不知道为什么getCount返回总计数

fiddle

Answer 2

您可以参考以下小提琴，它实际上是使用商店的ajax代理来实现无限滚动。https://fiddle.sencha.com/#view/editor&fiddle/3402

编辑：如果由于某些原因要使用Ext.Ajax.request方法，可以在下面的小提琴中进行检查，它使用Ajax.request方法来获取更多项-https://fiddle.sencha.com/#view/editor&fiddle/341a