Sencha Touch-如何启用无限滚动

Question

在Sencha Touch的文档中查找，似乎在“列表”小部件上有一个选项可以设置“无限”，从而启用无限滚动。

文件： https ： //docs.sencha.com/touch/2.3.1/#！/api/Ext.dataview.List-cfg-infinite

我希望这可以解决便携式设备上的大量清单所带来的性能问题。

重要说明：这是针对离线移动应用的。 如小提琴。 该存储区已包含所有数据。

我试图在一个很大的列表上启用它，但是它所做的就是隐藏数据。

{
    xtype: 'list',
    store: 'contactStore',
    flex: 1,
    itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',

    infinite: true /* Setting this to true hides the list */
}

我想念什么？ 我包括一个jsFiddle。

http://jsfiddle.net/AnthonyV/bba58zfr/

Answer 1

此处的问题与其他答案一样，都与加载数据无关。 您已经说过将数据加载到存储中就好了，因为当您没有将infinite设置为true您就可以看到数据。

首先，让我们讨论infinite配置的作用。 正如Anand Gupta所解释的那样， infinite配置将仅呈现可以在屏幕上容纳的列表项的数量（加上一些作为滚动缓冲区）。 如果您未将其设置为true则该列表将呈现所有项目并且不管理可见范围。 渲染所有项目后，列表可以支持自动调整大小。 但是，当infinite设置为true ，列表需要知道其大小才能计算其可以呈现的可见行数。

这是发生问题的地方，列表没有设置完整大小。 您将列表嵌套在容器中，并且该容器使用vbox布局：

config: {
    title: 'Big List Issue',
    fullscreen: true,
    items: [{
        xtype: 'container',
        layout: 'vbox',
        title: 'Big List',
        items: [{
            xtype: 'list',
            store: 'contactStore',
            id: 'simpleList',
            flex: 1,
            itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
            striped: true,
            infinite: false
        }]
    }]
}

从技术上讲这太过分了。 过度嵌套是指您在容器中嵌套了不需要嵌套在容器中的组件时。 这是您的代码的非嵌套版本，可以根据需要运行：

config: {
    title: 'Big List Issue',
    fullscreen: true,
    items: [{
        xtype: 'list',
        title: 'Big List',
        store: 'contactStore',
        id: 'simpleList',
        itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
        striped: true,
        infinite: true,
        variableHeights: true
    }]
}

我在这里所做的是删除容器，并将该列表作为MyApp.view.MyIssue导航视图的直接子MyApp.view.MyIssue 。 导航视图使用卡片布局，该布局将为每个直接子对象提供100％的高度和宽度，因此允许列表计算将infinite设置为true时可以呈现的行数。 这是一个Sencha小提琴，用于显示此未嵌套的列表： https ://fiddle.sencha.com/#fiddle/11v1

换句话说，如果您真的希望列表嵌套在该容器中（嵌套的越多，则DOM越大，因为创建了更多的组件，而DOM越大，则应用程序响应速度越慢），则可以给容器的vbox布局align配置：

config: {
    title: 'Big List Issue',
    fullscreen: true,
    items: [{
        xtype: 'container',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        title: 'Big List',
        items: [{
            xtype: 'list',
            store: 'contactStore',
            id: 'simpleList',
            flex: 1,
            itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
            striped: true,
            infinite: true
        }]
    }]
}

在未嵌套的列表示例中，我还使用列表上的variableHeights配置。 这样可以正确列出列表项。 用小提琴将其注释掉，以查看其不同之处。

Answer 2

首先，您需要了解infinite: true有助于提高列表性能。 它有助于仅呈现当前页面的那部分列表数据，其余的则不呈现。 所以，

1. 对于分页，您的后端应支持它应该具有诸如limit ， start ， pageSize等参数。

2. 为了实现分页，您的store应具有以下配置，如pageSize ， buffered等。

因此，如果您的后端支持并且已实现分页 。 然后，您可以享受infinite: true的优势infinite: true并获得极端的sencha触摸列表性能。

Answer 3

你可以这样。 添加此插件，它将自动处理无限滚动。

http://docs.sencha.com/touch/2.4/2.4.0-apidocs/#!/api/Ext.plugin.ListPaging

离线

您可以实施一个想法。 创建2个存储，其中一个是完全加载的，第二个将仅以某个页面大小加载。假设10。您将在网格中使用第二个存储并实现列表分页插件，也将第二个存储传递到此处。 您可以在这个小提琴示例中寻求帮助。 （此示例在Ext jS 5中，但逻辑相同）

https://fiddle.sencha.com/#fiddle/pim

请尝试这个，让我们知道。