Extjs4.2 無限滾動 緩存渲染 Ext.grid.plugin.BufferedRenderer

尊重原創:https://blog.csdn.net/zdb330906531

關於Extjs4.2中Grid無限滾動(緩存渲染)的功能,在網上已有介紹,如下:

Blog1:https://www.sencha.com/blog/infinite-grid-scrolling-in-ext-js-4/

Blog2:https://blog.csdn.net/tianxiaode/article/details/8286108

那麼,有朋友可能就會問我,德兵:你今天是想要重復倒騰這無限制滾動,然後為自己的博客刷點存在感嗎?

哈,如果你真是這麼想的,那你可就錯啦。

我寫這篇博客,主要目的是想對咱們使用無限滾動功能做一些補充完善,壓根就不是什麼長篇大論,能不能有收獲,當然要看你的理解能力咯。

言歸正傳,咱們參照官方examples\grid裡面的例子:

infinite-scroll.html;

infinite-scroll-grid-tuner.html;

infinite-scroll-with-filter.html;

在使用中可能遇到的問題,如下:

1、Grid壓根就看不到數據(確實扯蛋,但就是遇見啦)

2、Grid有數據,但就是沒有無限滾動的效果(沒有滾動加載效果,那還算是無限滾動麼)

3、Grid有數據,有無限滾動效果,但是最後一頁不見瞭(最後一頁出不來,你說怎麼辦)

好瞭,假如你遇到的就是其中一個問題,那麼這篇文章就是你非看不可的一篇。

解決問題1:檢查請求地址是否正確,當然官方例子裡面是請求的php地址,為瞭跨域而使用腳本標簽type: ‘jsonp’,咱們使用的時候一般是type: ‘ajax’

解決問題2:這個問題比較難,一般都不容易發現,隱藏得很深。假如你遇見這個問題,那麼你就要看看屬性:totalProperty ,它所對應的參數是否正確,這個屬性用於記錄Ext.data.Store 裡面的總數據,用於分頁的時候就靠它來識別是否到瞭最後一頁。是否引用 Ext.grid.plugin.BufferedRenderer該組件是必須有的,不然沒法緩存。

解決問題3:這問題也是一個坑,和後臺的數據處理有一點點的關系,主要還是Ext.data.Store裡面的屬性pageSize,leadingBufferZone引起,pageSize不能太小,建議使用100或以上,無限滾動的時候,前臺會向後臺傳遞參數page,limit,後臺通過page判斷當前需要加載的記錄是第幾頁。

好瞭,接下來說點題外話,咱們做功能遇到問題的時候,都是怎麼解決的呢?谷歌,百度,QQ群?其實最好的辦法還是多問問你的同事,你的好基友,不是麼?要不恥下問嘛。

需要技術支持的話,就留言,雖然我的出場費比較高,但也不至於回答幾個問題就要收大傢的服務費。

發佈留言