Paging toolbar on custom component querying local data store

Question

I have a few questions regarding paging a Ext Store.

The Store will pull an amount of historical data on page load.

If the number of records is greater than 10 then I need to implement paging on a custom component/view. The view will be generated with Ext.view.View and a XTemplate.

I would like to know if i can use the paging toolbar on a custom component and if i can query a Store where all the data is held locally. Therefore, not passing parameters to the server and pulling new data back but querying the data Store itself and displaying the results to the user.

Answer 1

It is possible using the Ext.ux.data.PagingMemoryProxy proxy. It is located in examples\ux\data\PagingMemoryProxy.js

The follow example show you how to paging images in a custom view create with generated with Ext.view.View and a XTemplate:

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',
    proxy: {
        type: 'pagingmemory'
    },
    data: [
        { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
        { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
        { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
        { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
    ],
    pageSize: 2
});

var imageTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div style="margin-bottom: 10px;" class="thumb-wrap">',
          '<img src="{src}" />',
          '<br/><span>{caption}</span>',
        '</div>',
    '</tpl>'
);

var store = Ext.data.StoreManager.lookup('imagesStore');
Ext.create('Ext.panel.Panel', {
    title: 'Pictures',
    autoScroll: true,
    height: 300,
    items: {
        xtype: 'dataview',
        store: store,
        tpl: imageTpl,
        itemSelector: 'div.thumb-wrap',
        emptyText: 'No images available'
    },    
    dockedItems: [{
         xtype: 'pagingtoolbar',
         store: store,
         dock: 'bottom',
         displayInfo: true
     }],    
    renderTo: Ext.getBody()
});​

You can see it working in jsfiddle.net: http://jsfiddle.net/lontivero/QHDZU/

I hope this is useful.

Good luck!