动态加载无限网格数据答案

【问题标题】：Load data of infinite grid dynamically动态加载无限网格数据
【发布时间】：2020-02-27 12:24:35
【问题描述】：

我使用 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。

【问题讨论】：

你的意思是ajax代理吗？还是 ajax？
使用 REST API 的 Ajax 调用
好吧，我很困惑。您需要一个能够显示摘要数据的缓冲存储。现实是缓冲存储用于代替分页存储。您必须对要显示的任何记录信息进行自定义编码。这还取决于前导缓冲区和尾随缓冲区来确定实际可用的记录数，因为缓冲存储会删除缓冲区设置之外的数据。为什么不使用商店并使用发送的起点和终点对结果进行分页？这将是根据页面大小显示总记录、页面和记录的最快方式。
这似乎是个好建议，但我担心大数据是否会使我的网格变慢。

标签： javascript extjs extjs6-classic

【解决方案1】：

你可以像这样得到记录的数量：

store.getData().length

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

不明白为什么getCount返回总数

fiddle

【讨论】：

哇，在 BufferedStore getCount 被覆盖和私有 docs.sencha.com/extjs/6.5.0/classic/src/…
如果您想获得的不是商店中的最大元素数量而是最后一个边框，请使用store.lastRequestEnd
如何使用 ajax 调用填充网格，任何示例
你的意思是边ajax调用？在什么情况下应该这样做，为什么？
我有几个过滤器要做响应，所以寻找 ajax 调用来实现无限网格

【解决方案2】：

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

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

【讨论】：