Tweet

今回は話題のExt JSを使ったサンプル

　Ext JSはAjaxアプリケーションを構築するためのJavaScriptライブラリ（フレームワーク）です。Ext JSを使用することで、デスクトップアプリケーションのようなユーザーエクスペリエンスを提供できます。2007年10月11日に2.0のベータ版がリリースされ大変注目を集めました。

　今回はそのExt JS 2.0のベータ版を使ったサンプルを紹介していきます。

■ ごく普通の入力フォームのサンプル

　まずこちらのサンプルを見てください。

　ごく普通の個人情報の入力フォームですね。

■ Ext JSを使ったフォームのサンプル

　この入力フォームをExt JSを使ってリッチにしたものがこちらです。

　次の点に気付きましたか？

• 入力インターフェイスが装飾されている
• 生年月日をカレンダーを使って入力できるようになっている
• コメントをWYSIWYG（ウィジウィグ、What You See Is What You Get、ワープロのように見た目どおりのレイアウトの文章になる）で入力できるようになっている
• 都道府県を選択するとそれに応じて市町村が表示されるようになっている
• 名前入力時、空のままでフォーカスを外すと、即座にエラーが表示されるようになっている

Ext JSとは何か？

　Ext JSは、Jack Slocum氏により、最初はYUI（Yahoo! UI Library）用の拡張ユーティリティ「yui-ext」として開発が始められました。その後、ベースライブラリとしてYUI以外に、prototype.jsやjQueryも利用できるようになり、現在の「Ext JS」という名前に変更されました（参考）。

図1　EXT JSのサイトTOPページ

　2007年11月6日現在の安定版リリースは1.1.1で、次期安定版となる2.0がベータ版として出ています。1.1以降は、YUIやprototype.js、jQueryのような外部ライブラリに依存せず独自のベースライブラリを利用することもできるようになっています。

図2　EXT JSとほかのJavaScriptライブラリとの関係図（EXT JSのサイトより引用）

　この図のように、Ext JSはこれまで使い慣れたprototype.jsなどのライブラリの上に、より洗練されたユーザーインターフェイスを実現させるライブラリとして導入できます。

　ライセンスはLGPLと商用ライセンスのデュアルライセンスを採用しています。

■ Ext JSは注目の次世代フレームワーク！

　Ext JSのオフィシャルサイトにあるサンプルを見ると、Ext JSでどのようなことができるが分かると思います。

図3　Ext JS 2.0 Samples

　Ext JSを利用することで、下記のようなさまざまなUI（ユーザーインターフェイス）を提供できます。

• ウィンドウの表示
• ソートや編集、ドラッグ＆ドロップが可能な表
• ディレクトリ・ツリー
• タブ
• 今回のサンプルのようなリッチな入力フォーム
• ツールバー、メニューバー

■ EXT JSのデザインマナーは「テーマ」で変更可能

　EXT JSのデザインマナーはテーマを切り替えることで変更ができます。テーマを切り替えると使用されるCSSや、画像が切り替わる仕掛けになっており、デフォルトのEXT-Blueのほか、Gray、Vistaなどのテーマも含まれているようです。

　そのほか、オープンソースコミュニティ内で作成されたテーマも利用できます。もちろん、テーマを自作することもできます。

　続いて次ページでは、今回使うAjaxデザインパターンで何ができるのかについてやサンプルの入力フォームについて解説します。

1-2-3-4

INDEX
パターンとライブラリで作るAjaxおいしいレシピ（3） Ext JSとprototype.jsで作るリッチなUI
	Page1 今回は話題のExt JSを使ったサンプル Ext JSとは何か？
	Page2 サンプルの構造と使用する3つのデザインパターン HTMLの入力フォームでは何をしているのか？
	Page3 コントローラーのコード全体を見てみよう ビューのソースコード（Ext JSでフォームをリッチに表示）
	Page4 都道府県と対応する市町村のJSONデータを表示 送信内容をダイアログ内で表示 Ext JS、LiveFormデザインパターンのススメ

リッチクライアント＆帳票 全記事一覧へ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード