sencha列表分页插件

Question

我正在尝试使用sencha touch的列表分页插件。但关于如何使用它，几乎没有好的(或坏的)文档，我很困惑。

当我激活列表中的插件时

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并将它们添加到列表中？

Answer 1

我在寻找好的文档时也遇到了问题，但我至少可以回答你的问题。如果您不想清除已加载的内容，则需要将pageSize添加到您的存储中，clearOnPageLoad也是如此。这是我的代码：

Ext.regStore('publicresources', {

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

})；

我正在调查的突出问题是：

1. 如何在没有更多要加载的记录时关闭" more“元素
2. 如何检测没有更多记录要加载，以及将检测代码放在哪里。
3. 如何将列表保留在用户所在的位置。每次加载都会跳回到list

中的第一项

祝好运!

Answer 2

我在SenchaTouch 2中的ListPaging插件也遇到过类似的问题，并设法在到达数据集的末尾时理清了“加载更多”的消息行为。

这是基于John Gordon提出的(关于指定pageSize和clearOnPageLoad配置选项)，因为这些属性在Senchatouch ouch2中似乎是相同的。我还没有详细研究过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'
        }
    ]
}

问题是，虽然我们的web服务返回特定页面的记录数组，但没有总的计数属性，插件需要该属性来确定何时加载了所有记录。因此，“加载更多”消息仍将保留(接受的解决方案中的问题#1 )。因此，在控制器的init函数中，我们必须为存储上的load事件附加一个事件处理程序，以便在接收到新的数据页面时将其挂钩：

Ext.define('MessagingApp.controller.Messages',
{
    extend: 'Ext.app.Controller',

    config:
    {
        views: [
            'MessageThreads',
            // Other views referenced by this controller
        ],

        stores: [
            'MessageThreads'
        ],

        refs:
        {
            // References to UI elements by selector...
        }
    },

    init: function() {
        // Other internal initialisation...

        this.control(
        {
            // Selector-object pairs...
        });

        // Provide a means to intercept loads of each page of records
        var threadStore = Ext.getStore('MessageThreads');
        threadStore.addBeforeListener('load', this.checkForThreadListEnd, this);
    },

    // Remaining controller functions...

});

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

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...

因为这是一个' before‘事件处理程序，所以在插件决定是显示'load more’还是'no more records‘消息之前，这个属性将被重要地更新。不幸的是，框架没有提供隐藏“没有更多记录”消息的方法，所以这必须通过CSS来完成。

希望这能有所帮助。

Answer 3

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

论坛线程http://www.sencha.com/forum/showthread.php?105193-Store-pageSize