没有 totalProperty 的 ExtJS 无限滚动答案

【问题标题】：ExtJS Infinite Scroll without totalProperty没有 totalProperty 的 ExtJS 无限滚动
【发布时间】：2021-01-12 09:48:53
【问题描述】：

在 ExtJs 中，我们总是需要 totalProperty 才能使分页正常工作。但这需要后端检索所有数据才能计算“总数”。

有没有一种方法可以让 extjs 分页/无限滚动在没有总数的情况下工作？这样我们就一直滚动，直到它没有更多记录并在那里结束。

【问题讨论】：

这不是 ExtJS 问题，而是数学问题。在不知道估计记录数的情况下如何调整滚动条的大小？后端只需要返回一个带有totalCount的属性，而不是所有记录供您在客户端计算。
我认为 Neo 正在寻找类似于 facebook 的东西。他们不断增长滚动条让用户向下滚动。当您到达当前数据集的末尾时，会添加更多内容。这会导致糟糕的用户体验。您可以使用许多滚动方法、onScrollEnd、onScrollMove、onScrollStart 等使用 extjs 创建这样的组件...话虽如此，大多数现代数据库都允许使用 count(*) 来返回给定查询的总记录数。
@mcg1103 是的，这就是我要找的。似乎在 ExtJS 中除了自己编写代码之外别无他法。不是太多的BE /数据库人。不确定cassandra是否可以做到这一点。但无论如何，您仍然需要阅读所有记录才能获得计数（逻辑上），对吗？ .
那么您不是在寻找返回所有记录的服务器端存储。基本上，您想要的是一个带有滚动侦听器的客户端网格，每次到达终点时，您都会下载另外 10、100 条记录（取决于您的行有多大）。还有其他网格可以做你想要的开箱即用。 ExtJS 不会。

标签： extjs extjs6

【解决方案1】：

totalCount 属性可以在下一次 AJAX 请求期间更改（它不是常量值）。以下示例适用于经典工具包 v 7.1：

Ext.application({
    name: 'Fiddle',
    launch: function () {


        // Store Model
        Ext.define('ForumThread', {
            extend: 'Ext.data.Model',

            fields: [
                'title'
            ]
        });

        // Named Buffered Store
        Ext.create('Ext.data.BufferedStore', {
            storeId: 'threadsStore',

            model: 'ForumThread',

            leadingBufferZone: 2,
            pageSize: 10,

            proxy: {
                type: 'ajax',
                url: 'data1.json',
                reader: {
                    rootProperty: 'topics',
                    totalProperty: 'totalCount'
                },
            },
            autoLoad: true,
        });

        // Infinite Grid using the Buffered Store
        Ext.create('Ext.grid.Panel', {
            title: "Infinite Grid",

            store: "threadsStore",

            renderTo: Ext.getBody(),
            width: "100%",
            height: 400,

            features: [{
                ftype: 'grouping',
            }],

            plugins: [{
                ptype: 'bufferedrenderer'
            }],

            columns: [{
                dataIndex: 'title',
                flex: 1
            }]


        });
    }
});

以及动态数据：

var totalCount = params.start + 10*params.limit;
var topics = [];
for(i=params.start; i<params.start+params.limit; i++) {
    topics.push({
        title: 'title_' + i
    })
}
return {
    "totalCount": totalCount,
    "topics": topics
};

【讨论】：

您的意思是在 beforeprefetch 事件中添加它吗？改变 store 的 totalCount 不会破坏网格？
不，我的意思是改变服务器端的totalCount。
我明白了。所以每一个请求，总数都会增加..我明白了。从来没想过。酷。感谢您的建议。