パターンとライブラリで作るAjaxおいしいレシピ
連載一覧へ
パターンとライブラリで作るAjaxおいしいレシピ（3）

Ext JSとprototype.jsで作るリッチなUI


アークウェブ株式会社
志田 裕樹
2007/11/8

都道府県と対応する市町村の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: '港区'},

…（略）…

    ]
}
- PR -

　ビューの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となります）。

■ 参考文献　

■ ＠IT関連記事


古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう
「Web Client & Report」フ ォーラム 2005/8/2

Ajax解体新書

よりAjaxを深く理解するために、ブラウザ上の「見た目」だけに注目するのではなく、実際に目に見えない舞台裏の通信内容をモニタリングしてみよう

最終更新 2006/11/22

Ajax うきうき Watch

Ajaxという流行技術の定義を明確にしながら、Ajaxの動向からうきうきするような面白いもの、確実に押さえておきたいものを厳選してお届けしていく

最終更新 2008/5/26

JavaScriptプログラミング再入門

　Ajax全盛のいま、オブジェクト指向ベースのJavaScript知識は不可欠。過去を振り返りつつ、まずは最新開発事情をチェック

最終更新 2007/9/25

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

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

 

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デザインパターンのススメ

パターンとライブラリで作るAjaxおいしいレシピ バックナンバー 連載インデックスへ»


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

TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

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

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH