ExtJS 5 - Paging toolbar for Grid not working with Memory Proxy

Question

I am loading inline data in my store with a memory proxy and enabling paging, but the problem is that my paging toolbar only shows the first page of data. The "Next" arrow button doesn't update the grid either. I have links to images at the bottom to show what the grid panel looks like.

This is my store:

Ext.define('PagingBug.store.MyGrid', {
    extend: 'Ext.data.Store',
    alias: 'store.mygrid',

    data: [
       [ 'Data1', 'Something1' ],
       [ 'Data2', 'Something2' ],
       [ 'Data3', 'Something3' ],
       [ 'Data4', 'Something4' ],
       [ 'Data5', 'Something5' ],
       [ 'Data6', 'Something6' ],
       [ 'Data7', 'Something7' ],
       [ 'Data8', 'Something8' ]
    ],

    fields: [
        {name: 'field1'},
        {name: 'field2'}
    ],

    pageSize: 5,

    proxy: {
        type: 'memory',
        enablePaging: true,
        reader: {
            type: 'array'
        }
    }
});

This is my view:

Ext.define('PagingBug.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'PagingBug.store.MyGrid'
    ],

    xtype: 'app-main',

    items: [{
        xtype: 'gridpanel',
        store: {
            type: 'mygrid'
        },
        columns: [
                {text: 'Field 1', dataIndex: 'field1'},
                {text: 'Field 2', dataIndex: 'field2'}
        ],
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: {
                type: 'mygrid'
            },
            dock: 'bottom',
            displayInfo: true
        }],
    }]
});

Images of the grid panel:

http://i.stack.imgur.com/PCqSC.png

http://i.stack.imgur.com/S8CXU.png

Can someone please point out what I am doing wrong? Thanks.

Answer 1

I've taken your code and simplified it slightly to create a fiddle , My fiddle is working and showing the correct pagination using ExtJs 5.0.1 but does not currently work with ExtJs 5.1. This could be a bug that needs reporting, I have posted in the Sencha Bugs forum for further investigation in the meantime.

In case the fiddle link ever breaks, here is the code used:

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var pagingStore = Ext.create('Ext.data.Store', {

            data: [
                ['Data1', 'Something1'],
                ['Data2', 'Something2'],
                ['Data3', 'Something3'],
                ['Data4', 'Something4'],
                ['Data5', 'Something5'],
                ['Data6', 'Something6'],
                ['Data7', 'Something7'],
                ['Data8', 'Something8']
            ],

            fields: [{
                name: 'field1'
            }, {
                name: 'field2'
            }],

            pageSize: 5,

            proxy: {
                type: 'memory',
                enablePaging: true,
                reader: {
                    type: 'array'
                }
            }
        });

        Ext.define('MainView', {
            extend: 'Ext.container.Container',

            items: [{
                xtype: 'gridpanel',
                store: pagingStore,
                columns: [{
                    text: 'Field 1',
                    dataIndex: 'field1'
                }, {
                    text: 'Field 2',
                    dataIndex: 'field2'
                }],
                dockedItems: [{
                    xtype: 'pagingtoolbar',
                    store: pagingStore,
                    dock: 'bottom',
                    displayInfo: true
                }],
            }]
        });

        Ext.create("MainView", {
            renderTo: Ext.getBody()
        });
    }
});

Once I get a response from the Sencha Forums I will update the answer. In the meantime you may need to look at a work around or use the working version.

Answer 2

This is actually a very subtle error on your part; In your Main class you are defining a store configuration of type: 'mygrid' on your gridpanel , you are then defining the store configuration a second time on the pagingtoolbar - this is creating two seperate store instances and subsequently confusing the toolbar component.

You can still solve this declaratively though by defining your store in a viewModel and binding a reference to the same store on the two components, for example:

Ext.define('PagingBug.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'PagingBug.store.MyGrid'
    ],

    viewModel: {
        stores: {
            myGridStore: {
                type: 'mygrid'
            }
        }   
    },

    xtype: 'app-main',

    items: [{
        xtype: 'gridpanel',
        bind: '{myGridStore}',
        columns: [
            {text: 'Field 1', dataIndex: 'field1'},
            {text: 'Field 2', dataIndex: 'field2'}
        ],
        dockedItems: [{
            xtype: 'pagingtoolbar',
            bind: '{myGridStore}',
            dock: 'bottom',
            displayInfo: true
        }],
    }]
});

» Fiddle