javascriptpaginationextjs4store

ExtJS 4 pagination with local store


I have a grid which uses a local store, that is created with an array. I tried to use this solution: Paging toolbar on custom component querying local data store but it doesn't seem to work.

My code:

    var myData = [];
    //... fill myData

    var store = Ext.create('Ext.data.ArrayStore', {
        fields: fields,
        data: myData,
        pageSize: 10,
        proxy: {
            type: 'pagingmemory'
        }

    });


    // create the Grid
    var table = Ext.create('Ext.grid.Panel', {
        id: "reportTable",
        store: store,
        columnLines: true,
        columns: columns,
        viewConfig: {
            stripeRows: true
        },
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: store,
            dock: 'bottom',
            displayInfo: true
        }]
    });

Without this part of code the grid is showed but pagination doesn't work. With it the whole grid doesn't appear at all.

    proxy: {
        type: 'pagingmemory'
    }

What could be the problem?


Solution

  • Most likely, the problem is that the PagingMemoryProxy.js is not being loaded. Make sure you are loading this script explicitly (since this is part of 'examples', it is not part of the ext-all ) You can find this under <extjs folder>\examples\ux\data\PagingMemoryProxy.js

    
    Ext.Loader.setConfig({
      enabled: true
    });
    
    Ext.Loader.setPath('Ext.ux', 'examples/ux');
    
    Ext.require('Ext.ux.data.PagingMemoryProxy');