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

Question

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

我尝试在我的商店配置中添加 leadingBufferZone 和 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(),
        });
    }
});

Answer 1

因此，您可以将 DataView 替换为 Grid with templatecolumn。在那里你可以使用缓冲存储或分页..

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.grid.Panel', {
            store: Ext.data.StoreManager.lookup('imagesStore'),
            columns: [{
                text: 'Department (Yrs)',
                xtype: 'templatecolumn',
                tpl: 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>',
                ),
                flex: 1
            }],
            height: 600,
            hideHeaders: true,
            rowLines: true,
            trackMouseOver: false,
            viewConfig: {
                stripeRows: false
            },
            rowLines: false,
            disableSelection: true,
            renderTo: Ext.getBody()
        });
    }
});

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

How to properly load large number of items in dataview in Extjs?

extjs

store

dataview