为Sencha Touch列表实现分页功能

Question

我有以下示例应用程序，试图为Sencha Touch实现分页功能，但在设置页面大小时遇到问题，并且当我加载更多数据时，列表中重复显示相同的旧数据，请问我做错了什么？

Ext.define("WEB.view.SearchView", {
    extend: 'Ext.dataview.List',
    xtype: 'SearchView',
 requires: [
         'Ext.dataview.List',
        'Ext.data.Store',
        'Ext.List'
    ],

    config: {

    title: 'Search Results',
    plugins: [
                            {
                                xclass: 'Ext.plugin.ListPaging',
                                autoPaging: false,
                                loadMoreText: 'Loading...',
                                noMoreRecordsText: 'No More Records'
                            },
                            { xclass: 'Ext.plugin.PullRefresh' }
                        ],
        //onItemDisclosure: false,
        store: {

            id: 'MySearchStore',
             autoLoad:false,
        pageSize: 15,
        clearOnPageLoad: false,
                fields: [
                  { name: "ShortDescription", type: "string" },
                { name: "MatchId", type: "bool" }
               ],
            proxy: {
                type: 'jsonp',
                url: 'http://Example.com',
                reader: {
                    type: 'json',
                    rootProperty: 'd'
                }
            }
        },
        itemTpl: new Ext.XTemplate('<tpl if="MatchId == 1">', '<p style="color: #ff9900">{BlockNo}</p><p>{ShortDescription}</p>', '</tpl>',
            '<tpl if="MatchId == 0">', '<p >{BlockNo}</p><p>{ShortDescription}</p>', '</tpl>'
        )
    }
});

- mahesh

---

请问您能展示一下JSON响应吗？里面有没有total键？ - Titouan de Bailleul

此外，您的模型应该包含一个id字段，该字段由后端发送的id填充。 - Titouan de Bailleul

Answer 1

这是一个简单的问题，但在刚开始时可能会成为瓶颈......将store中的pageParam设置为您在服务器端用于分页的内容......然后一切都应该正常工作...

注意：实际的分页逻辑应该在服务器端... Sencha只提供了一种逐步显示内容的方式...

Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',

config: {
    storeId: 'MyJsonStore',
    proxy: {
        type: 'ajax',
        pageParam: 'page',//This parameter needs to be modified
        reader: {
            type: 'json'
        }
    }
}

});

- Ram G Athreya