Ext JSによるウェブインターフェースの開発

文:Tony Patton(Special to TecRepublic) 翻訳校正:石橋啓一郎
2008-02-26 17:07:01
  • このエントリーをはてなブックマークに追加

グリッドコントロールを使った例

 私がExt JSで魅力的だと思う機能の1つに、強力なGridコントロールがある。これは、バックエンドのデータ源(MySQLの例が含まれている)やXMLや配列などその他の構造化データからのデータを表示するのに使える。

 次のプログラムの例では、JavaScript配列に定義されているデータ源に対しGridコントロールを用いる場合を示す。この例の最初の部分では、ベースとなるExt JSスクリプトライブラリと、Ext JSのさまざまな機能で使われるCSSを読み込んでいる。

 次にGridコントロールにJavaScript配列を読み込む。この配列にはウェブサイトに関するデータ(例えばサイト名とURLと識別番号)が入っている。このデータはExt JSフレームワークのSimpleStoreオブジェクトに読み込まれているものだ。新しいGridPanelを作成し、データ源として先ほど(配列から)作成したデータを割り当てる。そして、GridPanelのrenderメソッドでそのデータをページ上に表示する。

 この例で使われている面白い機能は、ページ上のスクリプト実行を無効にするonReadyメソッドだ。このExt JSイベントは重要なもので、すべてのスクリプトがページに読み込まれるとトリガされる。これを使うと、すべてのコードが読み込まれ、Ext JSコードの実行を先に進めてもよくなっ時点で合図を送るということができる。Ext JSに慣れたら、onReadyメソッドを使うことが習い性になるだろう。


 
 Array Grid Example
 
 
 
 
 
 

Array Example

 Gridコントロールは、表示もきれいでデータの処理も強力だ。これは単純な例ではあるが、Ext JSで何ができるかを教えてくれる。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]