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)だけ遅らせるようにすること。

読み込んでない範囲までスクロールするとグリッドが白くなってしまうのがちょっと気になるけど、スクロールがぎこちないよりは良いかと。