Sencha Touch 使用 pageSize 配置仅加载几行

Question

我有一个很大的商店（数千行），为了让我的应用程序运行更快，我想设置一个最大页面大小，以便在应用程序首次打开时加载。然后只显示用户向下滚动的其余数据。这是我目前所拥有的：

    Ext.define("myApp.store.foo", {
    extend : 'Ext.data.Store',

    requires : ['Ext.data.Store', 'myApp.model.foo', 'Ext.data.reader.Xml'],

    alias: 'myApp.store.approachMainStore',


    config: {
    model : 'myApp.model.foo',
    storeId: 'mainStore',
    autoLoad: true,
    pageSize: 50, 

    proxy : {
        type : "ajax",
        url : 'resources/images/data/bar_all.xml',
        reader : {
            type : "xml",
            pageParam: 'page',
            clearOnPageLoad: false, 
            rootProperty : 'foo',
            record : 'bar'
        }
    }

    }
});

我正在使用 List 的 xtype。但是当我运行我的应用程序一切正常时，除了它加载所有数据就像我添加之前一样 pageSize: 50, 我错过了什么？

运行煎茶触摸 2.4.1

Answer 1

为了使分页工作，服务器端需要响应发送的参数。您必须将静态 XML 文件替换为动态生成的文件。该脚本需要识别分页参数（page、limit、start）并且除了数据之外还必须 return total 和 count。

如果您不介意发送所有数据而只想加快显示速度，请查看 bufferedRenderer。

我刚注意到问题是关于煎茶触摸的，我正在回答 ExtJs 4.2。我不确定它是否对两者都有效。

Answer 2

您应该使用列表中的 ListPaging 插件。

 {
        xclass: 'Ext.plugin.ListPaging',
        autoPaging: true,
        loadMoreText : 'Loading more',
        noMoreRecordsText : 'loaded'
 }

请查看 sencha touch 文档以获取更多信息。

Sencha Touch 使用 pageSize 配置仅加载几行

Sencha Touch load only a few rows with pageSize config

javascript

extjs

sencha-touch

sencha-touch-2

store