Question

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

当我在列表中激活插件时

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

a'加载更多'文本，加载图像将添加到列表末尾。

但我不知道如何配置我的商店以使此插件能够加载更多数据。

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

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

这建立在John Gordon提出的基础上（关于指定pageSize和clearOnPageLoad配置选项），因为这些属性在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'
        }
    ]
}

问题在于，当我们的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 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...

因为这是一个'before'事件处理程序，所以在插件决定是否显示“加载更多”或“不再记录”消息之前，将严格更新此属性。遗憾的是，该框架没有提供隐藏“不再记录”消息的方法，因此必须通过CSS完成。

希望这有帮助。

Answer 2

我在查找好的文档方面遇到了问题，但我至少可以回答你的问题。如果您不想清除已加载的内容，还需要将pageSize添加到商店clearOnPageLoad。她是我的代码：

Ext.regStore('publicresources', {

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

}）;

我正在研究的突出问题是：

如果没有更多要加载的记录，如何关闭“更多”元素
如何检测没有更多要加载的记录，以及放置检测代码的位置。
如何将列表保留在用户所在的位置。每个负载都会跳回到列表中的第一项

Answer 3

还要记住，这只适用于服务器端。

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

Answer 4

关于“加载更多与不再记录”的消息 -

如果您正在编写自定义代理（例如A Sencha Touch MVC application with PhoneGap），则在返回的操作中设置总记录。

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

1）如果您要返回所请求的记录限制，请将总数设置为大于商店现在所持记录的数量

2）如果返回＆lt;请求的记录限制，将总数设置为1（强制“不再记录消息”）

    //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);
    }

Answer 5

只是添加对我有用的东西..

如果您的服务器返回totalCount而您想设置它，则可以使用阅读器中的totalProperty

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

sencha list paging plugin

5 个答案: