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

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