ExtJSのInfinite Gridのつづき
昨日の続き。
スクロールを滑らかにするためにGridの実装を以下のようにした。
Ext.define 'app.ux.Grid', {
extend: 'Ext.grid.Panel'
loadMask: true
viewConfig:
stripeRows: true
enableTextSelection: true
plugins:
ptype: 'bufferedrenderer'
synchronousRender: false
leadingBufferZone: 200
remoteSort: true
remoteGroup: true
remoteFilter: true
renderRange: (start, end, forceSynchronous)->
if @store.rangeCached(start, end)
@cancelLoad()
if @synchronousRender or forceSynchronous
@onRangeFetched(null, start, end)
else
@renderTask = new Ext.util.DelayedTask(@onRangeFetched, @, null, false) unless @renderTask
@renderTask.delay(1000, null, null, [null, start, end])
else
@attemptLoad(start, end)
}
ポイントはBufferedRendererのrenderRangeメソッドをオーバーライドして、renderTaskの実行を1000ms(=1s)だけ遅らせるようにすること。
読み込んでない範囲までスクロールするとグリッドが白くなってしまうのがちょっと気になるけど、スクロールがぎこちないよりは良いかと。