検索
連載

Ext JSとprototype.jsで作るリッチなUI：パターンとライブラリで作るAjaxおいしいレシピ（3）（4/4 ページ）

[志田裕樹，アークウェブ株式会社] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

都道府県と対応する市町村のJSONデータを表示

　次に、都道府県が選択された後に対応する市町村を表示する部分のソースコードを見ていきましょう。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

■ 市町村のComboBoxはJsonStoreを使う

　都道府県が選択されると、コントローラーのonSelectPref()メソッド（「コントローラーのコード全体を見てみよう」の章を参照）がコールされます。onSelectPref()メソッドでは、ビューのchangeCity()を呼び出す際、第2引数で選択された都道府県に対応する市町村情報が記述されているJSONファイルへのURLを渡しています。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　呼び出されるJSONファイルの形式は、次のようになります。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　ビューのchangeCity()メソッドでは、コントローラーから渡されるURL「'cities/' + target.data.value + '.json'」を受け取って、JsonStoreを生成し、それを使ってComboBoxを生成しています。

　JsonStore生成時、「root」オプションで、JSONの一番上位の親の要素名「cities」を指定しています。rootであるcitiesの子要素は、配列となり、それぞれの行ごとに、fieldsで指定した「value」「dispvalue」をキーとするハッシュが値として入ります。

　JsonStoreを指定されたComboBoxは、最初に選択された際にJSONの取得を行います。市町村ComboBoxの生成では、「renderTo: 'city_container'」が指定されています。applyToは、すでにコンポーネントを適用するDOM要素がHTML内にある場合に使用しますが、市町村は、初期状態では適用対象のDOM要素がないため、renderToを指定して、新しく要素を生成します。

　一度生成した後に市町村の要素を書き換える場合は、下記のように一度、要素を削除してから、新しく追加するようにしています。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

送信内容をダイアログ内で表示

　最後に、送信ボタンを押すと、ダイアログ内で送信内容が表示される部分のソースコードを見てみましょう。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　BasicFormインスタンスのisValid()メソッドを呼び出すことで、BasicFormに登録されたコンポーネントそれぞれに対して、入力チェックを行い、すべての入力項目の値が正しいかどうかを判定しています。

　その後、getValues()メソッドを使用して、各入力項目の値を取得し、Ext.MessageBoxクラスのalert()メソッドを使用して、ダイアログ内に、入力された値を表示しています。

　入力判定が正しくない場合は、エラーメッセージをダイアログで表示しています。

Ext JS、LiveFormデザインパターンのススメ

　冒頭でも述べたとおり、Ext JSは、デスクトップアプリケーションのようなユーザーエクスペリエンスを提供できる統合型フレームワークです。ベースライブラリとしてprototype.js、jQuery、YUIが選択可能なため、prototype.js用の追加ライブラリと共存させたり、すでにprototype.jsで構築してきたアプリケーションにExtによる機能追加を行っていくこともできますので、お勧めです。

　また、LiveFormデザインパターンは、即時入力チェックや、動的な入力フォームの更新でユーザーのフォーム入力を補助し、コンバージョン率の向上に貢献できるパターンで、こちらもとても便利ですので、ぜひ活用してみてください。

　次回もまた、新しいAjaxデザインパターンやライブラリを使い、楽しいサンプルをご紹介できればと思っています。

　今回使ったソースコードはこちらからダウンロードできます（サンプルのライセンスはGPL 2となります）。

■ 参考文献

著者紹介

プロフィール：志田 裕樹（しだ ゆうき）

株式会社アークウェブ取締役。Webシステムのシステムエンジニアとして開発に従事している。
Ajax、Ruby on Rails等を使用したWeb 2.0的システムの開発実績を持つ。
オープンソースのECサイト用CMS、Zen Cartの日本語コミュニティでコミッターとして活動している。


「次回」へ


「パターンとライブラリで作るAjaxおいしいレシピ 」バックナンバー
前のページへ | 　　　　　　

Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る