自定义组件上的分页工具栏查询本地数据存储

Question

我有一些关于分页 Ext Store 的问题。

商店将在页面加载时提取大量历史数据。

如果记录数大于10，那么我需要在自定义组件/视图上实现分页。 该视图将使用 Ext.view.View 和 XTemplate 生成。

我想知道是否可以在自定义组件上使用分页工具栏，以及是否可以查询所有数据都保存在本地的存储。 因此，不是向服务器传递参数并拉回新数据，而是查询数据存储本身并将结果显示给用户。

Answer 1

可以使用 Ext.ux.data.PagingMemoryProxy 代理。它位于examples\ux\data\PagingMemoryProxy.js

以下示例向您展示如何在使用 Ext.view.View 和 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()
});​

您可以在 jsfiddle.net 中看到它的工作原理：http://jsfiddle.net/lontivero/QHDZU/

我希望这有用。

祝你好运！