First Look at Ext JS 4.2 Grid

こんにちは、ゼノフィkotsutsumiです。

この記事は、US Sencha社ブログ “First Look at Ext JS 4.2 Grid”を翻訳したものです。

Ext JS4.2 grid 新しいExt JS 4.2 Betaのリリースで、多くの変更がなされました。フォーラムでのアナウンスでその全ての詳細を読むことができます。本稿では、Gridコンポーネントのパフォーマンスの向上にハイライトを当てます。

Ext JS 4.1 PerformanceとOptimizing Ext JS 4.1-based Applicationsという以前の投稿において、Gridコンポーネントのバッファリングの性能が改善されたことを強調しました。 Ext JS 4.2は、さらにバッファードレンダリングのパフォーマンスを更に強化して、この機能をよりすくないコンフィグ設定でより多くのシチュエーションで使えるようにしました。大きなデータセットを扱うアプリケーションでは、これらの最適化のおかげのレスポンスの劇的な改善を見ることができるでしょう。

Ext JS 4.1と4.2のGridを比較する

Ext JS 4.1では、ユーザーがバッファゾーンにスクロールするたびに、グリッドコンポーネントは表の行を物理的に再描画します。例えば一度に50行をレンダリングするグリッドを想像してください。現在100から150の行を表示中で、ユーザーが105行目までスクロールダウンしていると、グリッドはテーブルの行を105から155のレコードを表示するように再描画するでしょう。

Ext JS 4.2のGridコンポーネントでは、表示テーブルの行の管理方法が変わりました。前の例を使って、4.2のグリッドは100-104の行（すでに見えない）を削除し、151-155の行を新しいエレメントとして追加します。この最適化は、描画時間の著しい減少と、二次的なパフォーマンスの増加をもたらします。

私たちがまとめたパフォーマンステストは、2000行のグリッドを自動的にスクロールダウンするものです。 IE8上で2000行の上から下までスクロールするのにかかる合計時間を測定しました。(1.8GHzのCoreDuo、1GB RAMのThinkpadでのWindows XP上で) Ext JS 4.2の改善の結果、処理時間は2分の1に縮小しました — それはつまり非常によりなめらかに流れるようにスクロールすると言うことです。

Ext.grid.plugin.BufferedRenderer

Ext JS 4.1のグリッドでのバッファードレンダリングにアクセスするには、ページングスクローラーと連携するために手動で”bufferd”コンフィグをデータストアに定義しなければなりませんでした。

// Ext JS 4.1 style buffering on the store
var store = Ext.create('Ext.data.Store', {
    // allow the grid to interact with the paging scroller by buffering
    buffered: true,
    pageSize: 50,
    data: dataJson,
    model: 'Employee',
    proxy: {
        type: 'memory'
    }
});
 
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    loadMask: true,
    //etc...
});

“buffered”コンフィグがデータストアのパフォーマンスを最適化する便利な方法であった反面、ストアがそのデータの表示方法について、非常に深く知っていることも意味していました。いくつかのコンポーネントがストアを共有するかもしれませんから、ストアレベルでバッファリングを定義することには問題がありました。

その上、Ext JS 4.1のバッファードストアは、ユーザーがグリッドの中でレコードを編集したときに問題が発生しました。ストアのメインレコードコレクションには描画されている行だけが存在する（描画されていないレコードはプライベートなページマップに隠されます）ので、レコードを編集して同期させるのが難しくなりました。

Ext JS 4.2はこの問題を、Ext.grid.plugin.BufferedRendererプラグインを導入することによって解決します。このプラグインは、ストアがその表示について知らないままでいさせます。これからは関連するデータの表示をバッファリングすることは、グリッドコンポーネントだけが責任を持ちます。

// new Ext JS 4.2 Ext.grid.plugin.BufferedRenderer
Ext.require([
    'Ext.grid.plugin.BufferedRenderer'
]);
var store = Ext.create('Ext.data.Store', {
    pageSize: 50,
    data: dataJson,
    model: 'Employee',
    proxy: {
        type: 'memory'
    }
});
 
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    loadMask: true,
    plugins: 'bufferedrenderer',
    //etc...
});

このグリッドはテーブルの一部分を（Ext JS 4.1と同じ方法で）描画します、しかし、それはデータ・ストアの追加されたコンフィグレーションを取り除きます。これはまた、すべてのグリッド／ストアの機能（例えばグルーピングや編集）がこのプラグインとシームレスに動作することも意味します。また、バッファリング機能がストアで定義されなくなったので、通常のストア機能（edit/save/sync）はすべてバッファードグリッド上で同時に有効になります。

それでもやはり、（上記の最初の例に示した）バッファードストアはExt JS 4.2にも存在します。バッファードデータセットは多くの現実のアプリケーションにとってまだ重要です — 新しいバッファーグリッドプラグインはグリッドコンポーネントに特化した追加の機能強化を伴った他の実装であるにすぎません。

Configuration

BufferedRendererプラグインは、可視領域の外で描画される行の数だけでなく、データソース（リモートまたはローカル）からバッファーへのデータのページ数を制御するための設定が簡単にできます。

“trailingBufferZone”と”leadingBufferZone”コンフィグはExt JS 4.1.xと同じように動作します — しかしこれらのコンフィグはストアではなくプラグインに設定します。（先に述べたようにバッファードストアはまだ存在します — ですからアンバッファードストアの場合にはプラグインにこれらの値を設定するようにしましょう）リフレッシュが必要とされる前によりスクロールして提供するより大きなテーブルを生成し、スクロールしたときにより早くリフレッシュできるようにメモリ上により多くレコードのページを保持するためにこのコンフィグを指定します。

BufferedRendererプラグインには、データのサイズが予想できない場合（カスタムのセル描画やテキストの折り返しがある場合など） “variableRowHeight”プロパティを設定する事もできます。このコンフィグはグリッドのパフォーマンスを最適化するために、デフォルトではfalseになっています。 （注：”grouping”や行の拡張などの特定の機能を使うにはフラグをセットします）

Download Ext JS 4.2 Beta

Ext JS 4.2のサンプルを発掘する

動作中のBufferedRendererプラグインを見るには、新しいExt JS 4.2.0 SDkをダウンロードして、いくつかのグリッドサンプル（/examples/gridフォルダーにあります）を探してサンプルを開きます。

無限スクロールグリッド（infinite-scroll.js）
無限スクロールチューナー（infinite-scroll-grid-tuner.js）
バッファードスクロール（buffer-grid.js）
高さが可変の行（var-height-rows.js）

Gridのこの機能強化があなたのアプリケーションへの役に立つ追加であることを望みます。

Ext JS

First Look at Ext JS 4.2 Grid

カテゴリ

アーカイブ