Grid Pagination using in memory store - Extjs 7.6 Modern

app.js

// https://fiddle.sencha.com/#view/editor&fiddle/3oce

Ext.application({
    name: 'Fiddle',
    launch: function () {
        var controller = Ext.create('Ext.app.ViewController', {            
            init: function () {
                this.populateStore();
            },
            populateStore: function () {
                var data = [{
                    'fname': 'Barry',
                    'lname': 'Allen',
                    'talent': 'Speedster'
                }, {
                    'fname': 'Oliver',
                    'lname': 'Queen',
                    'talent': 'Archery'
                }, {
                    'fname': 'Oliver2',
                    'lname': 'Queen',
                    'talent': 'Archery'
                }, {
                    'fname': 'Kara3',
                    'lname': 'Zor-El',
                    'talent': 'All'
                }, {
                    'fname': 'Helena4',
                    'lname': 'Bertinelli',
                    'talent': 'Weapons Expert'
                }, {
                    'fname': 'Hal5',
                    'lname': 'Jordan',
                    'talent': 'Willpower'
                }, {
                    'fname': 'Barry6',
                    'lname': 'Allen',
                    'talent': 'Speedster'
                }, {
                    'fname': 'Oliver7',
                    'lname': 'Queen',
                    'talent': 'Archery'
                }, {
                    'fname': 'Kara8',
                    'lname': 'Zor-El',
                    'talent': 'All'
                }, {
                    'fname': 'Helen9',
                    'lname': 'Bertinelli',
                    'talent': 'Weapons Expert'
                }, {
                    'fname': 'Hal10',
                    'lname': 'Jordan',
                    'talent': 'Willpower'
                }, {
                    'fname': 'Barry11',
                    'lname': 'Allen',
                    'talent': 'Speedster'
                }, {
                    'fname': 'Oliver12',
                    'lname': 'Queen',
                    'talent': 'Archery'
                }, {
                    'fname': 'Kara13',
                    'lname': 'Zor-El',
                    'talent': 'All'
                }, {
                    'fname': 'Helena14',
                    'lname': 'Bertinelli',
                    'talent': 'Weapons Expert'
                }, {
                    'fname': 'Hal15',
                    'lname': 'Jordan',
                    'talent': 'Willpower'
                }, {
                    'fname': 'Barry16',
                    'lname': 'Allen',
                    'talent': 'Speedster'
                }, {
                    'fname': 'Oliver17',
                    'lname': 'Queen',
                    'talent': 'Archery'
                }, {
                    'fname': 'Kara18',
                    'lname': 'Zor-El',
                    'talent': 'All'
                }, {
                    'fname': 'Helena19',
                    'lname': 'Bertinelli',
                    'talent': 'Weapons Expert'
                }, {
                    'fname': 'Hal20',
                    'lname': 'Jordan',
                    'talent': 'Willpower'
                }];
                var pagingStore = this.getViewModel().getStore('userStore')
                pagingStore.getProxy().setData(data);
                pagingStore.load();
            }

        });

        var viewModel = Ext.create('Ext.app.ViewModel', {
            stores: {
                userStore: Ext.create('Ext.data.Store', {
                    fields: ['fname', 'lname', 'talent'],
                    pageSize: 3,
                    proxy: {
                        type: 'memory',
                        enablePaging: true,
                        reader: {
                            type: 'json'
                        }
                    }
                })
            }
        })

        Ext.create('Ext.grid.Grid', {
            requires: [
                'Ext.toolbar.Paging'
            ],
            plugins: {
                pagingtoolbar: true
            },
            title: 'DC Personnel',
            viewModel: viewModel,
            controller: controller,
            bind: {
                store: '{userStore}'
            },

            columns: [{
                text: 'First Name',
                dataIndex: 'fname',
                flex: 1
            }, {
                text: 'Last Name',
                dataIndex: 'lname',
                flex: 1
            }, {
                text: 'Talent',
                dataIndex: 'talent',
                flex: 1
            }],

            height: 230,
            layout: 'fit',
            fullscreen: true
        });
    }

});