いま注目のExt JS

定番のGridを使ってみる

まずは、定番のGridコンポーネントを使ってみましょう。このサンプルファイルはダウンロードできますので、この中の「html/sample/array-grid.html」を見ながら解説します。ダウンロード（html.zip/593KB）。

GridコンポーネントはExcelのような動的な表の機能を提供するものです。最近ではGoogle DocsをはじめZohoなどWeb上で動的なコントロールができる表機能は一般的になってきています。

EXT JSのGridコンポーネントはさまざまな機能を持っていますが、今回は配列から表を生成するというとてもシンプルな例をご紹介します。なお、このサンプルはExt JSからダウンロードした「ext-2.1/examples/grid/array-grid.html」を、本連載の解説用に一部改変を加え、コメントなどを追記したものです。

Gridを生成するには、大きく分けて「Gridに表示させるデータを2次元配列で生成する（step1）」、「step1で生成した配列からデータストアを作成（step2）」、「Gridの生成（step3）」の3ステップから成り立っています。

step1の2次元配列は、シンプルなJavaScriptネイティブの配列です。

Grid作成において重要な肝となるのがstep2での、「データストアの作成」です。Gridはデータストア（Ext.data.Store）というオブジェクトにデータを保持します。今回は配列から生成するのでExt.data.SimpleStoreというExt.data.Storeを拡張したよりシンプルに扱えるクラスを使っています。またこのデータストアを作成する際にカラムごとにデータタイプを設定することができます。サンプルではfloat、dateといったフォーマットを設定しています。

step3では、実際の表示に関するパラメータを設定し（タイトル、サイズ、カラムの名前など）、Gridを生成しています。step3-2:各カラムの属性を設定というところを見ていただくと、細かく機能やレンダリングの設定をしているのが分かるかと思います。

EXT JSの特徴の1つとして設定するパラメータが直感的で分かりやすいことだと思います。コードを見れば何を設定しているのかが、ヘルプを見なくても容易に想像がつくものが多いです。

ソートや表示のカスタマイズも可能

Gridで生成された表は図2のようにソートすることも可能です。カスタムの関数を独自に定義して、カラムのレンダリングルールを独自に付け加えることもできます。

今回のサンプルではchangeという関数を定義しています。これは値が0未満であれば赤色で表示し、それ以外は緑で表示するというルールを定義しています。この関数をstep3のstep3-2:各カラムの属性を設定というところでrenderer: changeと設定することで該当列に対してこのルールを適用させています。

いかがでしょうか。こんなシンプルな記述でこんなにパワフルな表を生成することができてしまうのです。

「ext-2.1/examples/grid/」には、外部のxmlを取り込んで表示するサンプルやセルの編集ができるサンプルなど多数そろっていますので、こちらもぜひご覧ください。