Sencha Touch數據視圖與分頁插件

Så我注意到Sencha Touch中一個非常惱人的錯誤。當我嘗試將分頁插件添加到我的數據視圖時，「加載更多」文本放置在項目上方，而不是像我想要的那樣。它與標準的listview一起工作。Sencha Touch數據視圖與分頁插件

我發現另一個線程要求我在我的數據視圖中添加「inifinte：true」，但這並沒有幫助。也沒有「底部：0」或「停靠：底部」選項。這裏是我的代碼：

{ 
    xtype: 'dataview', 
    plugins: { 
    type: 'listpaging', 
    loadMoreText: 'Indlæs flere..', 
    autoPaging: true 
    }, 
    flex: 1, 
    cls: 'inspectionImages', 
    itemId: 'imageContainer', 
    padding: 10, 
    style: 'background: #F7F7F7; color: black', 
    emptyText: 'Der er ingen billeder på synet.', 
    itemTpl: ['...'], 
    loadingText: 'Henter billeder..', 
    store: 'Images' 
}

而且這裏有一個例子煎茶小提琴碼 - 框架的2.4.x：

Ext.application({ 
launch: function() { 
    var touchTeam = Ext.create('Ext.DataView', { 
     fullscreen: true, 
     plugins: { 
      type: 'listpaging', 
      loadMoreText: 'Indlæs flere..', 
      autoPaging: true 
     }, 
     store: { 
      fields: ['name', 'age'], 
      data: [{ 
       name: 'Jamie', 
       age: 100 
      }, { 
       name: 'Rob', 
       age: 21 
      }, { 
       name: 'Tommy', 
       age: 24 
      }, { 
       name: 'Jacky', 
       age: 24 
      }, { 
       name: 'Ed', 
       age: 26 
      }] 
     }, 
     itemTpl: '<div>{name} is {age} years old</div>' 
    }); 

    touchTeam.getStore().add({ 
     name: 'Abe Elias', 
     age: 33 
    }); 

    touchTeam.getStore().getAt(0).set('age', 42); 
    } // launch 
}); // application()

我與Ext.dataview.dataview的煎茶觸摸文檔中檢查，這在添加分頁插件時顯示類似的行爲，所以我知道這可能不是我自己的錯。我真的很想將loadinText放置在數據視圖的底部。任何建議將非常感謝！

來源

2015-01-06 Mkni1408

是您的分頁做工精細用數據視圖？ –

是它的工作原理，它是「loadmore」 -text剛放置那就是問題所在。 – Mkni1408

-1

事實證明，pagingplugin不適用於Dataview。它可以被使用。最後，我最終只是在插件每次加載結束時手動移動DOM中的「加載更多」文本。爲了確保沒有監聽器丟失，我使用了appendchild JS函數並應用了一些自定義css。現在一切都按預期工作。

來源

2015-01-12 13:21:37 Mkni1408

請把你的CSS代碼放在底部。 –

這是Sencha Touch中的一個錯誤。 Mitchell Simoens已經告訴here它只適用於List，但我相信這也應該支持dataview，因爲它比list輕。

在sencha論壇solutions中，您可以看到他們已將xtype從dataview更改爲list。我也有同樣的問題，我也這樣做。但是如果你想要dataview而不是list的外觀和感覺，你可以做一些補充。

disableSelection: true, 
pressedCls: '',

我希望這可以幫助你。需要幫助請叫我。

來源

2015-01-07 12:57:59

嘿阿南德，謝謝，但那不是我真正想要的。這讓我很煩惱，dataview支持插件，但缺少一些基本功能，比如在哪裏放置「加載更多」按鈕。我設法通過手動移動按鈕來解決它。 – Mkni1408

列表分頁插件是爲列表開發的。如果您將它用於DataView，那麼加載更多文本將出現在頂部。我面臨同樣的問題。我已經通過列表分頁插件Js。然後通過改變Css屬性來獲得解決方案。

檢查「loading-spinner」CLass並將樣式更改爲：style =「font-size：180％; margin：10px auto; position：absolute; bottom ：0px; left：50％並檢查類 - 「list-paging-msg」並將樣式更改爲style =「position：absolute; bottom：0px;左：50％;」

來源

2015-01-19 09:20:24

我已經找到了解決方案，通過列表分頁插件，Ext.dataview.DataView和Ext.dataview.List的代碼走後

數據視圖後

初始化列表分頁插件初始化，然後。「負載更多的組件」的位置將是正確的。

Ext.define('MyDataView', { 
 
    extend: 'Ext.dataview.DataView', 
 
    
 
    config: { 
 
     /* do not set here 
 
     plugins: [{ 
 
      xclass: 'Ext.plugin.ListPaging', 
 
      autoPaging: true 
 
     }, { 
 
      xclass: 'Ext.plugin.PullRefresh' 
 
     }] 
 
     */ 
 
    }, 
 

 
    initialize: function() { 
 
     var me = this; 
 

 
     me.callParent(); 
 

 
     // Initialize plugin here, so the listpaging component will append after dataview container 
 
     me.setPlugins([{ 
 
      xclass: 'Ext.plugin.ListPaging', 
 
      autoPaging: true 
 
     }, { 
 
      xclass: 'Ext.plugin.PullRefresh 
 
     }]); 
 
    } 
 
}

來源

2017-11-15 06:02:38 user2861067

Sencha Touch數據視圖與分頁插件

回答

相關問題