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

請嘗試這個，讓我們知道。