コントローラーのコード全体を見てみよう
次に、コントローラー「controllers/extform/form_controller.js」のコードを見てみましょう。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
■ prototype.jsによるイベント登録処理
コントローラーのコードはイベントハンドラの設定とビューの呼び出しで構成されています。
イベントハンドラの設定にはprototype.jsのEvent.observeを使用しています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
上記、$('send')のonclickイベントが発生したら、onClickSend()メソッドがコールされるように設定する、という意味になります。
このようにExtを使う場合もPrototype.jsの機能をこれまでどおり使用できます。このため、Prototype.js用拡張ライブラリなどもExtと同居させて使用できます。
「this.onClickSend.bind(this)」の「.bind(this)」を指定すると、ハンドラが呼ばれたときの、ハンドル内のthisオブジェクトの実体はextform.FormControllerインスタンスになります。
■ Ext JS流のイベント登録も使う
都道府県が選ばれたときのイベントの設定は、Event.observe()ではなく、Ext流のイベント登録の方法を使用しています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
都道府県は、Extによってコンボボックスに変換されていますので、従来のテキストボックスとは発生するイベントの種類が異なります。このため、Event.observe()ではなく、Extのon()メソッドでハンドラを設定する必要があります。
「this.form.findField('pref')」は都道府県のコンボボックスを検索する記述です。「form」はBasicFormインスタンスです。BasicFormについてはビューの解説時にもう一度説明します。
今回は、都道府県のコンボボックスの「select」イベントに対して、コントローラのonSelectPref()メソッドを登録しました。on()メソッドの第3引数の「this」は、prototype.jsの上記「.bind(this)」と同等の働きをします。
ビューのソースコード（Ext JSでフォームをリッチに表示）
次に、ビューのソースコード「javascripts/views/extform/form_view.js」を確認しましょう。
まず、「A-1：Extでフォームをリッチに表示するように依頼」に対応するapplyExt()メソッドです。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
■ Ext JSの即時入力チェック機構
Ext JSは入力インターフェイスの入力完了を監視し、即時に入力チェックを行う機能（「LiveFormパターン」）を提供しています。即時入力チェックに関連する記述を抜き出して解説します。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
冒頭の「Ext.QuickTips.init();」は、エラー発生時にエラーメッセージをツールチップ風に表示できるようにする指定です（参考）。
次に、Ext.form.BasicFormインスタンスを生成し、名前の入力インターフェイスであるExt.form.TextFieldインスタンスを生成して、BasicFormインスタンスに登録しています。
このTextFieldのような表示要素を、Extでは「コンポーネント」と呼んでいます。Ext.formパッケージ配下には、TextFieldのほか、ComboBoxやRadioやDateFieldなど、さまざまな入力インターフェイス用コンポーネントが用意されています。
BasicFormのadd()メソッドを使って、入力インターフェイスのコンポーネントを登録すると、その項目に対する入力完了時の即時入力チェックが行われるようになります。BasicFormに登録されたコンポーネントは、コントローラー内でも「form.findField('pref')」のように使用されていましたが、findField()メソッドを使って検索することもできます。
「名前」のTextFieldコンポーネントを生成する際に指定していた、「allowBlank: false」は、入力必須の指定です。これによって、名前を空のままでフォーカスを外すと、即時にツールチップでエラーが表示されるようになります。
■ applyToで既存の入力インターフェイスをリッチ化
「名前」の入力インターフェイスをリッチ化する部分についてもう少し詳しく解説します。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
TextFieldコンポーネントをapplyToというオプションを指定して生成しています。「applyTo」は、指定されたDOM要素に対して、TextFieldのコンポーネントを適用する指定です。この記述によって、従来のテキストボックスが、ExtのTextFieldコンポーネントになります。
■ 都道府県をComboBoxコンポーネントに変換
次に、都道府県をComboBoxコンポーネントに変換する部分を見ていきましょう。関連するソースは次の個所です。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
Ext.data.SimpleStoreインスタンスを生成し、Ext.form.ComboBoxコンポーネントを生成する際に、storeオプションにSimpleStoreインスタンスを指定して生成しています。
ComboBoxの選択肢（<select>タグでいう<option>タグ）は、このようにStoreというクラスのサブクラスのインスタンスを使って指定します。
Storeとは、表やコンボボックスなどのコンポーネントが表示する元データとして活用されるもので、クライアントサイドのキャッシュ機構を備えており、表のカラム名のような役割をするfields値を、属性として持つ点が特徴として挙げられます。
Storeは、メモリ内の配列から生成するSimpleStoreや、サーバ上のjsonファイルから生成するJsonStoreなどがあります。今回は下記のようなデータ構造を持つStoreを生成しました。
| value | dispvalue | |
|---|---|---|
| tokyo | 東京都 | |
| kanagawa | 神奈川県 | |
| chiba | 千葉県 | |
| saitama | 埼玉県 |
ComboBox生成時に、「displayField: 'dispvalue'」「valueField: 'value'」という指定をすることで、ComboBoxの表示値を「dispvalue」カラム、選択された際の内部のvalue値を「value」カラムとして指定しています。
ComboBox生成時のそのほかのオプション値については詳しくはリファレンスを参照してください。
■ DateFieldコンポーネント、HtmlEditorコンポーネントの適用
生年月日の項目にはDateFieldコンポーネント、コメントの項目にはHtmlEditorコンポーネントを適用しています。
DateFieldコンポーネントの生成時の「format: 'Y/m/d'」はカレンダーを使って選択した日付を、テキストで表示する際のフォーマットを指定するものです。これ以外のフォーマットでユーザーが入力をした場合は、即時入力チェックでエラーが表示されます。「value: '1970/01/01'」は初期値を指定しています。
HtmlEditorコンポーネントの生成時の「width」「height」は、HTMLエディタの横幅、縦幅の指定です。
さらに次ページでは、ビュー部分でのJSONファイルの扱い方について解説します。
Copyright © ITmedia, Inc. All Rights Reserved.