如何在 Extjs 的数据视图中正确加载大量项目？

问题描述

我有一个绑定到 viewmodel 商店的数据视图 ('Ext.view.View')，并且数据视图正确显示项目。但是，问题是在显示项目之前加载了整个商店，当有大量项目时可能会很慢。如何仅加载和显示一页数据，然后当页面滚动到末尾以加载另一部分数据时？除了滚动，页面末尾的“显示更多”等按钮也是可以接受的。

我尝试在我的商店配置中添加 leadershipBufferZone 和 pageSize，但没有任何反应 - 整个商店在开始时再次加载，只是这次网络流量显示 limit:20 而不是 limit:25。

这个缓冲存储是如何工作的？

  stores: {
      items: {
          model: 'Admin.model.Item',autoLoad: true,//leadingBufferZone: 60,//pageSize: 20,}
  } 

Ext.application({
    name: 'fiddle',launch: function () {
        Ext.define('Image',{
            extend: 'Ext.data.Model',fields: [{
                name: 'src',type: 'string'
            },{
                name: 'caption',type: 'string'
            }]
        });

        Ext.create('Ext.data.Store',{
            id: 'imagesstore',model: 'Image',data: [{
                src: 'https://www.w3schools.com/css/img_5terre.jpg',caption: 'Drawing & Charts'
            },{
                src: 'https://www.w3schools.com/css/lights600x400.jpg',caption: 'Advanced Data'
            },{
                src: 'https://www.w3schools.com/w3css/img_sNowtops.jpg',caption: 'Overhauled Theme'
            },{
                src: 'https://www.w3schools.com/w3css/img_forest.jpg',caption: 'Performance Tuned'
            }]
        });

        Ext.create('Ext.view.View',{
            store: Ext.data.StoreManager.lookup('imagesstore'),itemTpl: new Ext.XTemplate(
                '<div class="card" style="padding-left: 32px;">','<div><button type="button" class="btn"><span class="btnSpan">Button</span></button></div>','<div class="img"><img src="{src}" class="imgClass"></div>','</div>',),itemSelector: 'div.card',emptyText: 'No images available',renderTo: Ext.getBody(),});
    }
});

解决方法

因此，您可以将 DataView 替换为带有模板列的 Grid。在那里你可以使用缓冲存储或分页..

@client.event
async def on_message(message):
    if message.content.startswith('>'):
        user_id = message.author.id
        user = await client.fetch_user(int(user_id))
        print(user)