4

データストアが手動でロードされるextJS（4.1）グリッドで無限スクロールを実行することは可能ですか？

myStore = Ext.create('Ext.data.Store', {
    fields:givenStoreFields,
    data: [[]],
});

myGrid = Ext.create('Ext.grid.Panel', {
    store: myStore,
    columns: givenColumns,
});

私の場合、サーバーからデータをフェッチし、データを微調整してから、手動でストアにロードします。

myStore.loadData(fetchedAndTweaked);

fetchedAndTweakedには多くの行が含まれているため、レンダリングは非常に遅く、ブラウザー全体の速度が低下します。したがって、myGrydとmyStoreにパラメーターを追加して、（データセットfetchedAndTweakedで）「無限」スクロールを実行したいと思います。

ただし、私が見つけたすべての例では、データストアにはプロキシ/リーダーなどがあります。

//ありがとう

4

2 に答える 2

4

Ext JS 4.1.3ドキュメントでbuffered: true説明されているように、ストアでconfigを使用する場合は、次のことができます。

buffered：Booleanストアがページキャッシュ、レコードのページをプリフェッチしてキャッシュし、このページキャッシュからの読み込み要件を満たすことができるようにします。

バッファリングされたストアを使用するには、最初のページをロードしてプロセスを開始します。レンダリングされる行数は自動的に決定され、スクロール用にキャッシュを準備するために必要なページの範囲が要求され、キャッシュされます。例：

myStore.loadPage(1); // Load page 1

PagingScrollerがインスタンス化され、グリッド内のスクロールを監視し、必要に応じてページキャッシュからビューの行を更新します。また、ビューのスクロールがプリフェッチされたデータの両端近くのデータを利用するときに、新しいデータをページキャッシュにプルします。

プリフェッチされたデータからビューの更新をトリガーするマージンは、Ext.grid.PagingScroller.numFromEdge、Ext.grid.PagingScroller.leadingBufferZone、およびExt.grid.PagingScroller.trailingBufferZoneです。

より多くのデータをページキャッシュにロードするトリガーとなるマージンは、leadingBufferZoneとtrailingBufferZoneです。

デフォルトでは、5ページのデータのみがページキャッシュにキャッシュされ、ビューがデータセット内を下に移動すると、ページがバッファから「スクロール」します。この値をゼロに設定すると、ページがページキャッシュからスクロールアウトされることはなく、最終的にはデータセット全体がページキャッシュに存在する可能性があります。データセットが天文学的な比率に達しない限り、これが望ましい場合があります。

選択状態は、それらのレコードがストアのプライマリコレクションから循環するときにコレクションからレコードを破棄しないようにSelectionModelを構成することにより、ページ境界を越えて維持できます。これは、SelectionModelを次のように構成することによって行われます。

selModel: {
    pruneRemoved: false
}

デフォルト：false

利用可能：4.0.0

上記のようpageSizeに、ストアの構成を必要なものに設定する必要もあります。

警告の言葉：無限スクロールを実行可能にするレコードの数が、ローカルストアに合理的に保持する必要のあるレコードの数を超えているため、無限スクロールのあるローカルストアの例は見つかりません。

つまり、ブラウザの速度を低下させるのはレンダリングだけではなく、ローカルで処理しようとしているデータの量でもあります。

無限スクロールを実装する必要があると感じた場合は、おそらくリモートでロードされたデータストアに変換するときです。

于 2013-01-13T02:22:25.033 に答える
3

アップグレード後、extJS 4.2（beta）ではこれがはるかに簡単であることがわかりました。無限スクロールはデータストアから切り離されます。IEは、使用するデータストアの種類は関係ありません。また、ソートは必要に応じて機能します。

store = Ext.create('Ext.data.SimpleStore',{
        autoLoad: true,
            pageSize:100,
            data:[
                []
            ], 
     }

Ext.require('Ext.grid.plugin.BufferedRenderer') 
var grid = Ext.create('Ext.grid.
             plugins: 'bufferedrenderer',
             store : store,
        }
//I load matrix data directly in the store for speed
store.loadRawData(matrixData);

アプリケーションは非常に高速になりました。

于 2013-03-21T13:00:13.543 に答える