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

» 2007年11月08日 00時00分公開

[志田裕樹，アークウェブ株式会社]

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

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

extform.FormView = {

              

      …（略）…

      

          // 都道府県と対応する市町村の表示

          changeCity: function(form, url) {

              var city = form.findField('city')

              if (city) {

                  form.remove(city);

                  city.destroy();

              }

      

              var store = new Ext.data.JsonStore({

                  url: url,

                  root: 'cities',

                  fields: ['value', 'dispvalue']

              });

      

              city = new Ext.form.ComboBox({

                  renderTo:      'city_container',

                  store:         store,

                  id:            'city',

                  displayField:  'dispvalue',

                  valueField:    'value',

                  typeAhead:     true,

                  triggerAction: 'all',

                  emptyText:     '選択してください',

                  selectOnFocus: true});

              form.add(city);

          }, 

      

      …（略）…

      

      }

■ 市町村のComboBoxはJsonStoreを使う

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

        // B－1：対応する市町村を表示するように依頼

              extform.FormView.changeCity(this.form,

                  'cities/' + target.data.value + '.json');

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

{cities: 

          [{value: '千代田区', dispvalue: '千代田区'},

          {value: '中央区',   dispvalue: '中央区'},

          {value: '港区',     dispvalue: '港区'},

      

      …（略）…

      

          ]

      }

　ビューの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を指定して、新しく要素を生成します。

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

        var city = form.findField('city')

              if (city) {

                  form.remove(city);

                  city.destroy();

              }

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

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

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

      extform.FormView = {

              

      …（略）…

      

          send: function(form) {

              if (form.isValid()) {

                  var values = form.getValues();

                  Ext.MessageBox.alert('送信しました',

                      '名前: '           + values.name + '<br />' +

                      '都道府県: '       + values.pref  + '<br />' +

                      '市町村: '         + values.city  + '<br />' +

                      '生年月日: '       + values.birth + '<br />' +

                      '自己紹介: <br />' + values.introduction);

              }else {

                  Ext.MessageBox.alert('送信に失敗しました',

                      '入力内容を確認してください')

              }

          }

      }

　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となります）。

■ 参考文献