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

I have a dataview ('Ext.view.View') that is bound to a store in viewModel, and dataview shows items correctly. But, the problem is that the whole store is loaded before the items are displayed, which might be slow when there is a large number of items. How can I load and show only one page of data and then when page is scrolled to the end to load another portion(s) of data? Instead of scrolling, button at the end of the page like 'Show more' is also acceptable.

I tried to add leadingBufferZone and pageSize in my store config, but nothing happens - the whole store is again loaded at the beggining except that this time network traffic shows limit:20 instead of limit:25.

How does this buffered store work?

  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(),
        });
    }
});

So, you can replace the DataView with Grid with templatecolumn. There you can use buffered store or pagination..

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()
        });
    }
});