实现sencha触摸列表的分页

时间:2012-06-19 07:49:08

标签: html5 sencha-touch extjs sencha-touch-2

我有以下示例应用程序,我正在尝试为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>'
        )
    }
});

1 个答案:

答案 0 :(得分:3)

这是一个简单的问题,但是当你开始时可能成为瓶颈...... 将商店中的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'
        }
    }
}

});