Sencha touch sencha列表分页插件

我正在尝试使用SenchaTouch的listpaging插件。但是几乎没有关于如何使用它的好（或坏）文档，我感到困惑

当我激活列表中的插件时

this.myList = new Ext.List({
  store: this.myStore,
  plugins: [{
    ptype: 'listpaging',
    autoPaging: false
  }],
  itemTpl: '...'
});

“加载更多”文本和加载图像将添加到列表的末尾

但我不知道如何配置我的商店，使这个插件能够加载更多的数据

App.regStore('MyStore', {
 model: 'myModel',
 proxy: {
    type: 'ajax',
    url: 'http://mydomain.com/json?howmany=10&page=1',
    reader: {
        type: 'json',
        root: 'results'
    }
  }
});

App.stores.myStore = Ext.StoreMgr.get('MyStore');

---

我如何配置我的商店，以便当我点击“加载更多”时，商店会自动打开第2页并将它们添加到列表中？

我也很难找到好的文档，但我至少可以回答您的问题。如果不想清除已加载的内容，还需要将

pageSize

添加到存储中，

clearOnPageLoad

。她是我的密码：

Ext.regStore('publicresources', {

model: 'PublicResource',
autoLoad:false,
remoteFilter:true,
sortOnFilter:true,
    pageSize: 15,
    clearOnPageLoad: false, 
sorters: [
    {
        property : 'distance',
        direction: 'ASC'
    }
]

}))

我正在研究的未决问题有：

当没有更多记录要加载时，如何关闭“More”元素

如何检测没有更多的记录要加载，以及将检测代码放在何处

如何将列表保留在用户所在的位置。每次加载跳回列表中的第一项

---

祝你好运

还请记住，这目前仅适用于服务器端

---

论坛线程

我对SenchaTouch 2中的ListPaging插件也有类似的问题，并且在到达数据集末尾时，成功地整理了“加载更多”消息的行为

这是基于John Gordon提出的（关于指定

pageSize

和

clearOnPageLoad

config选项），因为这些属性在Senchatouch 2中似乎是相同的。我还没有详细研究SenchaTouch 1.x。在SenchaTouch 2中，必须在

config

属性中定义所有配置选项：

Ext.define('MessagingApp.store.MessageThreads', {
    extend  : 'Ext.data.Store',
    requires: ['MessagingApp.model.MessageThread'],

    config:
    {
        model: 'MessagingApp.model.MessageThread',

        autoLoad: false,
        clearOnPageLoad: false,  // This is true by default
        pageSize: 10,            // This needs to be set for paging

        proxy: {
            type: 'jsonp',
            pageParam: 'currentPage',
            limitParam: 'pageSize',
            url: APIURL + '/message-app-service/GetMessageThreads',
            reader: {
                type: 'json',
                rootProperty: 'Data'
            }
        }
    }
});

在我们指定插件的视图中，我们可以覆盖“加载更多”和“不再记录”消息：

{
    xtype:'dataview',
    store:'MessageThreads',
    id:'threadList',
    itemTpl:Ext.create('Ext.XTemplate',
        '<!-- template markup goes here -->',
        {
            //custom helper functions here
        }
    ),
    plugins:[
        {
            xclass:'Ext.plugin.ListPaging',
            autoPaging: true,

            // These override the text; use CSS for styling
            loadMoreText: 'Loading...',
            noMoreRecordsText: 'All messages loaded'
        }
    ]
}

在处理程序中，我们意识到当返回的记录数小于页面大小时，我们已经到达了数据集的末尾。如果总记录计数是页面大小的倍数，则最后一个“页面”将有一个空数组。一旦确定了数据集的结尾，我们将更新存储区的

totalCount

config属性：

checkForThreadListEnd: function(store, records, isSuccessful) {
    var pageSize = store.getPageSize();
    var pageIndex = store.currentPage - 1;    // Page numbers start at 1

    if(isSuccessful && records.length < pageSize)
    {
        //Set count to disable 'loading' message
        var totalRecords = pageIndex * pageSize + records.length;
        store.setTotalCount(totalRecords);
    }
    else
        store.setTotalCount(null);
},

// Other controller functions...

checkForThreadListEnd:函数（存储、记录、isSuccessful）{
var pageSize=store.getPageSize（）；
var pageIndex=store.currentPage-1；//页码从1开始
if（isSuccessful&&records.length

因为这是一个'before'事件处理程序，所以在插件决定是否显示'loadmore'或'nomorecords'消息之前，此属性将被更新。不幸的是，该框架没有提供隐藏“no more records”消息的方法，因此这必须通过CSS来完成

希望这能有所帮助。

关于“加载更多记录vs.无更多记录”消息-

如果您正在编写自定义代理（此处示例），则在返回的操作中设置总记录

如果还不知道总记录，您可以执行如下操作，其中

1） 如果要返回请求的记录限制，请将总数设置为大于存储现在保存的记录的值

2） 如果返回<请求的记录限制，则将总数设置为1（以强制显示“无更多记录”消息）

---

再加上对我有用的东西

如果您的服务器返回totalCount，并且您想要设置它，那么您可以在读卡器中使用totalCount属性

reader: {
            type: 'json',
            rootProperty: 'results',
            totalProperty: 'resultCount'
        }

---

谢谢你的回答，如果还有其他问题，也请告诉我。我未完成的项目中的项目3是我代码的错误。我有一段代码，在刷新数据时强制用户返回列表顶部，以避免sencha touch的列表组件出现另一个渲染错误。当替换列表的数据少于原来的数据时，错误就会显现出来，导致列表呈现错误。您是否能够找到第一个问题的解决方案：“当没有更多记录要加载时，如何关闭“More”元素？”感谢d_mcg的解决方案。还有一个问题：“不再有记录”链接仍然可以点击，一旦点击它就会向服务器发送请求。你如何解决这个问题？非常感谢：）不客气：-）我还没有找到一种简单的方法来禁用该按钮，主要是因为SenchaTouch只提供了将该按钮的文本设置为任意一种状态的方法（通过“private”

loadTpl

config属性中的XTemplate应用）。您可以使用一些魔术来截获此按钮的点击事件并返回false（这将取消该事件），或者使用一个时髦的CSS选择器将按钮隐藏在“不再记录”状态。你可以看到Sencha在忘记说的时候是如何做的——你可以将鼠标悬停在绿色标题（即类名）上，显示该类的“查看源…”链接。我发现这对于找出文档中没有提到的一些额外细节非常有帮助。嗨@d_mcg我也有同样的问题，你能看看这篇文章吗？

    //return model instances in a result set
    operation.resultSet = new Ext.data.ResultSet({
        records: contacts,
        //total  : contacts.length,
        total  : contacts.length === operation._limit ? (operation._limit * operation._page +1) : 1,
        loaded : true
    });
    //announce success
    operation.setSuccessful();
    operation.setCompleted();
    //finish with callback
    if (typeof callback == "function") {
        callback.call(scope || thisProxy, operation);
    }

reader: {
            type: 'json',
            rootProperty: 'results',
            totalProperty: 'resultCount'
        }