Ext JSにおけるフォームの構築

このガイドでは、ArchitectでシンプルなExt JSのフォームを構築し、フォーム送信用のイベントハンドラを付加する方法を示しています。また、すべてのコンテナやフォームを構築するために使用可能なフィールドコンポーネントの詳細な説明を提供し、フォームフィールドのレイアウトを作成するいくつかの一般的な例を提供し、データストアからコンボボックスのドロップダウンリストへの取り込みまで順を追って説明します。

Sencha Touchのフォームに関する同様の情報に関しては、Sencha Touchにおけるフォームの構築を参照してください。

シンプルなフォームの構築

フォームのほとんどすべてが、同じ基本的な部品から構成されています。それは、１つ以上のフォームフィールドと、フォームの検証と送信を行うイベントハンドラを持つ submit ボタン1個（最低）を含む Form Panel です。一般的な例を簡単に示すため、考えうるもっとも単純なフォームの一つであるログインフォームを作成してみましょう。

ビューの追加と構築

新しいExt JSのプロジェクトを開始し、プロジェクトの設定でURL接頭辞を設定します。詳細は、デスクトップ端末向けのアプリケーションの構築およびモバイル端末向けのアプリの構築を参照してください。ツールボックスのコンポーネントからForm Panelを探し、それをダブルクリック、またはキャンバスにドラッグしてプロジェクトに追加します。キャンバス上のパネルのタイトルバーをダブルクリックし、Loginに変更します。

ツールボックスからText Fieldをフォームパネルの上にドラッグします。ラベルをダブルクリックし、User Nameに変更します。Configで、nameプロパティの値をusernameに設定します。

ツールボックスから別のText Fieldをフォームパネルの上にドラッグします。ラベルをダブルクリックし、Passwordに変更します。Configで、nameプロパティの値をpasswordに設定し、inputTypeをpassword設定してpasswordフィールドにします。

両方のフィールドに必須チェックを付けるため、ConfigのallowBlankプロパティのチェックをそれぞれ外します。

次に、ツールボックスからToolbarコンポーネントをフォームパネルの上にドラッグします。[Project Inspector（プロジェクトインスペクタ）] でツールバーを選択します。 キャンバス上で選択することもできますが、[Project Inspector（プロジェクトインスペクタ）] で選択すると確実に正しいコンポーネントを選択できます。キャンバスでツールバーの Flyout Config ボタンをクリックし、Dock In Parent に bottom をセットします。ツールバー上にボタンをドラッグし、ラベルをダブルクリックしてLoginに変更します。ボタンを右に整列させるために、ツールバーを選択し、Configのpackプロパティをendに設定します。

振る舞いの追加

最後のステップでは、ユーザーが送信したとき、フォームを取得できるようにロジックを追加します。Loginボタンを選択し、Configからイベント項目を検索します。追加ボタン (“+”) をクリックして新しいイベントを作成し、イベントの一覧からclickを選択します。今、インスペクタで子のボタンとしてクリックイベントがあることに注意してください。クリックイベントをダブルクリックしてイベントのコードエディタを開きます。エディタで次のコードを挿入します。

if (this.getForm().isValid()) {    
    this.getForm().submit({
        url: 'login.php',
        success: function(form, action) {
            Ext.Msg.alert('Login Successful!');
        },
        failure: function(form, action) {
            Ext.Msg.alert('Login Failed!');
        }
    });
}

このコードでは、元になるフォームが有効であるかどうかをチェックします。有効とは、allowBlankプロパティのチェックを外した後、２つのフィールドが必ず入力されていることです。そうなっている場合、フォームはサーバーサイドスクリプトへのURL login.phpへ送信されます。そのサーバーサイドスクリプトの内容に関しては、このチュートリアルの範囲を超えてますが、上記のコードは成功と失敗の両方の応答を処理する方法を示しています。上記は単純なalertメッセージですが、ここには好きなロジックを記述することができます。

シンプルなフォームを試してみましょう。このプロジェクトを保存してブラウザでプレビューします。任意の値を入力せずにLoginボタンをクリックすると、フィールドが無効であるという強調表示になることがわかります。値を入力して再度送信すると、失敗時のメッセージが表示されます。 これはlogin.phpが存在しないからであると考えられます。

フォームコンポーネント

次に、先ほど説明した例よりも複雑なフォームを構築するために、使用可能なすべてのコンテナとフィールドを調べてみましょう。それぞれの名前は、対応するAPIドキュメンテーションにリンクされています。

コンテナ

Ext JSはフォームフィールドのグループ化とフォームのための特殊なコンテナを提供します。

• Form Panel すべてのフォームのメインとなる最外部のコンテナ。これはPanelのすべてをサポートしていますが、 フォームフィールドのデータを読み込んで、送信するための特別な機能を追加し、基礎となるフォームオブジェクト（getForm()メソッドを介してアクセス可能）を公開します。

• Field Container すべての子コンポーネントを許可し、他のフィールドとラベルの位置があうように、コンテナ本体の横に、または上にラベルを表示します。

• FieldSet HTMLの<fieldset>要素として表示し、その内容を開閉できます。

• Radio Group フォーム上に集約された複数のラジオボタンのグループは、単一の送信パラメータで送信されます。

フォームフィールド

下記のフォームフィールドのコンポーネントが、ツールボックス内のForm Fieldsグループ下に表示されます。通常、フォームの各フィールドに対してname設定をセットします。 このnameはフォーム送信時のフィールドのパラメータとして使用される名前です。すべてのフィールドで、labelAlign設定を介してフィールドの横や上に整列、またはhideLabel設定を介して非表示にすることができるように、fieldLabel、も有効にしてください。

• Checkbox Group フォーム上に集約された複数のチェックボックスのグループは、単一の送信パラメータで送信されます。

• Checkbox 単一のチェックボックスフィール。

• ComboBox ドロップダウンリストから可能な値のオプションを表示するテキストフィールドです。リストの内容は、任意のデータストアからロードすることができ、ユーザーの入力からフィルタリング/検索することができます。コンボボックスは以下で詳細に説明します。

• Date Field ポップアップカレンダーのウィジェットから日付を選択可能にするためのトリガーボタンが付いた、日付型テキストフィールド。

• Display Field 読み取り専用のプレーンテキストで値が表示されるフィールド。

• File Upload Field ファイルアップロードフィールド。

• Hidden Field 非表示入力フィールド。

• HTML Editor 書式制御のツールバーを使用した、リッチなHTMLエディタフィールド。

• Label Field スタンドアローンなフィールドラベル。通常はこれを使用する必要はなく、フィールドコンポーネントに含まれる、fieldLabelを使用します。

• Multi Slider 複数のスライダーのつまみのドラッグスライダーフィールド。

• Number Field 数値のみが許可されるテキストフィールドで、オプションとして値を増加/減少させることができるスピンボタンを表示します。

• Radio 単一のラジオボタンフィールド。

• Radio Group Ext.form.field.Radio コントロールを列型に配置する特殊なレイアウトを持つフィールドコンテナで、ラジオボタンのグループ全体の取得、設定、バリデーションのためExt.form.field.Radio メソッドに対し利便性を与えます。

• Slider ドラッグ可能なスライダーフィールド。

• TextArea 複数行入力のテキストエリアフィールド。

• Text Field 単一行のテキストフィールド。

• Time Field 時間を選択するためのドロップダウンリストのある時間の値を許可するテキストフィールド。

• Trigger Field 横にトリガーボタンがついたテキストフィールド。

フォームのレイアウトを制御する

デフォルトでは、Form Panelに追加したフィールドは縦に積み重ねられ、フォームは最大の幅まで拡大されます。これは、決してレイアウトだけというわけではありません。 Form Panelは、他のExt JSのコンテナのように、内部レイアウトとサブコンテナの入れ子も変更するサポートをしているので、フィールドをどのようなサイズ、配置に設定するかを完全に制御することができます。これについては、レイアウトで紹介しています。

では、フォームレイアウトのいくつかの一般的な例を見てみましょう。

フォームのフィールド幅の変更

デフォルトで、Form Panelの子は垂直に積み重ねられ、フォーム幅いっぱいに拡大描画されます。 これは、Form Panelのデフォルトのレイアウトがanchorであるため、子にはデフォルトでanchor:'100%'が与えられます。全幅ではない拡大した形にしたい場合、Anchor設定を違う値に変更します。たとえば、anchor:'-100' は、右端から 100px の位置にフォームを拡大します。また、フィールド幅を固定にしたい場合、anchor設定の横にある“x”ボタンをクリックし、width設定に必要な値を設定することで、anchor設定をオフにすることができます。

FieldSetによるフィールドのグループ化

FieldSetは視覚的にグループを配置し、使いやすい形成にする最も一般的な方法です。

Form Panelを生成し、そこにFieldSetを追加して、FieldSetに複数の他のフィールドを追加します。FieldSetの凡例（タイトル）をダブルクリックすると、新しい名前に変更することができます。

FieldSetはcollapsibleにチェックを入れ、開閉可能にすることができます。collapsed設定にチェックを入れることで、デフォルトで閉じた状態のFieldSetを作成します。

ちょうどForm Panelのように、FieldSetは自動的にanchorレイアウトが設定されます。 設定したいレイアウトに変更したり、上記のように子フィールドを幅を制御することができます。

ラジオボタンとチェックボックスのグループ

Checkbox GroupとRadio Groupは、チェックボックスとラジオボタンのグルーピングに特化したコンテナです。

Form Panelを作成して、そこにRadio Groupを追加します。グループのメインラベルをFavorite Colorに変更し、２つのデフォルトのラジオのボックスラベルをRedとGreenに変更します。グループに３つ目のRadioフィールドを追加し、hideLabel設定にチェックを入れてメインラベルを非表示にし、ボックスラベルをBlueに変更します。

１度に１つだけチェックが入るように、３つのname設定に同じ値を設定して、３つのラジオボタンを接続します。

ラジオグループのallowBlank設定のチェックを外し、ユーザーは必ずいずれかのラジオボタンにチェックを入れなければならないようにします。もし、どのボタンもチェックされなかった場合、フォームの入力チェックで失敗し、グループは単一のフィールドと同じ方法で無効として強調表示されます。

ラジオボタンはデフォルトで水平に配置されることに注意してください。columns設定を変更することで、垂直方向のカラムに変更することができます。たとえば、columns:1 と設定すると、単一のカラムを生成します。

複数カラムのアレンジフィールド

多数のフィールドを持つフォームの場合、スクロールを最小限に抑えるために、複数のカラム（列）でこれらを整理することが可能です。これを行うには、Form Panel内にネストされたコンテナを使用します。特定のセクションや、フォーム全体のどちらかは、フォームのフィールド間の関係に応じて、複数のカラムにレイアウトすることができます。

たとえば、Form Panelを生成し、レイアウトをhboxに変更します。これに２つのコンテナのインスタンスを追加します。コンテナは横並びに配置され、flexに1が設定されているので、それぞれが同じスペースを取ることに注意してください。

各コンテナのレイアウトをanchorに変更します。複数のフォームフィールドを各コンテナへ追加します。現在、２つのカラムのフィールドを持っています。margins設定によって、カラムコンテナの間にスペースを追加することができます。

フィールドを水平に整列させる

たとえば、マルチパートの名前フィールドのように、フォーム内の関連するフィールドのグループを、複数列ではなく 1 行に並べて配置しなければならないことがあります。

たとえば、Form Panelを生成し、FieldSetを追加します。FieldSetのレイアウトをhboxに、HBoxのalign設定をtopに変更します。

ここで、FieldSetにText Fieldを追加し、ラベルをFirst、labelAlign設定をtopに変更し、名前をfirstnameとします。フィールドを右クリックし、Duplicateを選択して複製し、得られた２つ目のフィールドのラベルをMI、名前をmiddleinitialに変更します。この２つ目のフィールドを複製して、得られた３つ目のフィールドのラベルをLast、名前をlastnameに変更します。

現在、３つの水平に配置された、同じ大きさのフィールドを持っています。レイアウトをさらに微修正しましょう。１つ目のフィールドを選択し、flexを2に変更します。MIフィールドを選択し、flexの値を削除して、widthに30を設定し、marginsに0 10を設定して、右と左にそれぞれ10pxの間隔を与えます。最後のフィールドを選択し、flex に 3 を設定します。

ComboBoxにデータを読み込む

ComboBoxフィールドはユーザーが簡単にドロップダウン選択リストから値を選択するのに役立つ、最も便利なフォームフィールドの一種です。ComboBoxのドロップダウンリストに表示されている項目は、データストアを使用して定義しています。続ける前に、ストアとモデルについて学んでおくと良いでしょう。

ComboBoxのストアを設定する最も簡単な方法は、次のようにローカルのArray Storeを生成することです。

プロジェクトインスペクタの上部にある“+”ボタンをクリックし、Array Storeを選択することで、新しいArray Storeを生成します。インスペクタで新しく生成されたMyArrayStoreを選択し、userClassName設定をColorsに変更します。Config内のFields項目の横の“+”ボタンをクリックすることで、ストアのための単一のフィールドを定義します。 フィールド名をtextと設定します。

この例では、静的なローカルデータをストアに直接追加します。 実際のアプリケーションでは、Ajax proxyを使用してリモートURLからデータを取得しますが、ローカルデータのために、ストアのproxyを右クリックして、Transform–>Ext.data.proxy.Memoryを選択することでローカルメモリーのproxyに変更します。

静的な配列データをストアに追加しましょう。 ストアのdata設定に次の値を挿入します。

[{text:'Red'}, {text:'Green'}, {text:'Blue'}, {text:'Yellow'}, {text:'Purple'}]

最後に、ComboBox フィールドを作成してストアに付加します。Form Panel を作成し、ComboBox を追加して、ComboBox ラベルに Color と設定します。ComboBox を選択し、Config で store コンフィグに Colors ストアを選択します。データはローカルなので、queryMode コンフィグに local と設定します。（データがリモート URL からクエリされた場合、remote のデフォルト値が使用されます。）

ここまででプロジェクトを上書き保存し、プレビューすると、 ComboBoxはドロップダウン選択リストのオプションとしてストアから色を提示し、入力時に自動的にフィールドのオプションをフィルタリングします。