Contents シンプルなフォームの構築 Viewコンポーネント振る舞いフォームコンポーネントコンテナフォームフィールド

Sencha Touchにおけるフォームの構築

このガイドでは、Architect で Sencha Touch のシンプルなフォームを構築し、フォーム送信のイベントハンドラを付加する方法を示しています。また、全てのコンテナと、フォームを構築するために使用可能なフィールドコンポーネントの詳細な説明を提供します。

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

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

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

Viewコンポーネント

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

フォームパネルにFieldSetコンポーネントをドラッグし、キャンバス上でそのタイトルをダブルクリックして、タイトルをLoginに変更します。*通常、グループのタイトルを提供してグループ間の間隔やコーナーの丸みを与えるFieldSetコンテナで、１つ以上フォームフィールドをラッピングすることをおすすめします。*

最初のフィールドのラベルをダブルクリックし、“Username”に変更します。name設定を“username”に、labelWidthを“35%”に変更します。

２つ目のフィールドを右クリックして、Transform–>Ext.field.Passwordでpasswordフィールドに変換します。これは、ユーザーが入力したパスワードの文字を、実行しているブラウザが覆い隠すことを意味します。ラベルをダブルクリックし、Passwordに変更します。name設定をpasswordに、labelWidthをusernameフィールドに一致するように35%に変更します。

フォームパネルにボタンをドラッグします。それをダブルクリックして、ラベルをLoginに変更します。コンフィグを confirm に変更します。

振る舞い

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

var values = this.getValues();
if (values.username && values.password) {
    this.submit({
        url: 'login.php',
        method: 'POST',
        success: function(form, result) {
            Ext.Msg.alert('', 'Login Successful!');
        },
        failure: function(form, result) {
            Ext.Msg.alert('', 'Login Failed!');
        }
    });
} else {
    Ext.Msg.alert('Error', 'Both username and password are required.');
}

このコードでは、ユーザーが両方のファイルに値を入力したかどうかをチェックします。どちらのフィールドにも値がない場合、警告メッセージが表示されます。両方の値が入力されている場合には、URL login.php にあるサーバーサイドスクリプトにフォームが送信されます。そのサーバーサイドスクリプトの内容に関しては、このチュートリアルの範囲を超えてますが、上記のコードは成功と失敗の両方の応答を処理する方法を示しています。上記は単純なalertメッセージですが、ここには好きなロジックを記述することができます。

シンプルなフォームを試してみましょう。このプロジェクトを保存してブラウザでプレビューします。値を入力せずに [Login（ログイン）] ボタンをクリックすると、エラーメッセージが表示されます。値を入力して再度送信すると、失敗時のメッセージが表示されます。これは login.php スクリプトが存在しないためと考えられます。login.php スクリプトが存在し、成功時の応答を返した場合、成功を示すメッセージが表示されます。

フォームコンポーネント

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

コンテナ

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

Action Sheet – ポップアップダイアログにボタンのリストを表示します。
Carousel – ユーザーが複数のフルスクリーンページをスワイプして移動できるようにします。カルーセルでは 1 度に 1 ページしか表示しませんが、指でスワイプして移動できます。
Container – コンポーネントの全機能に加えて、内部に他のコンポーネントを配置して描画することができます。
Form Panel – すべてのフォームのメインとなる最外部のコンテナ。これはPanelのすべてをサポートしていますが、送信するための特別な設定プロパティとフォームフィールドの値の送信と読み込みのメソッドを持っています。
Ext.form.FieldSet – 関連したフィールドをグループ化するコンテナ。オプションでタイトルと説明文をつけることができます。
Menu – 画面のどの側面（上、左、下、右）にもリンクでき、メニューのコンテンツを表示します。
Panel – アプリケーション上にフロートするコンテナであるオーバーレイとして非常に有用です。Panelには追加のスタイルも含まれています。たとえば、他のコンポーネントを渡して showBy を呼び出すと、パネルは角の丸い黒色のボックスに表示され、その「先端」が参照コンポーネントを指し示します。
Sheet – 一般的なシートクラス。このレンダリング可能なコンテナは、ポップアップまたはサイドアンカーのスライドパネルの方向指定移動に基本的なサポートを提供します。
Tab Panel – ユーザーが複数のページをすべてフルスクリーンのまま切り替えるのに便利な方法です。タブパネル内の各コンポーネントは、自身のTabを得て、タップされたときにそのコンポーネントを表示します。タブはTab Panelの上部または下部に配置することができ、タイトルとアイコン設定を任意に受け入れることができます。

フォームフィールド

下記のフォームフィールドのコンポーネントが、ツールボックス内のForm Fieldsグループ下に表示されます。通常、フォームの各フィールドに対してname設定をセットします。こののnameはフォーム送信時のフィールドのパラメータとして使用される名前です。すべてのフィールドで、labelAlign設定を介してフィールドの任意の側に整列させられるラベルを許可し、その幅はlabelWidth設定を介して設定されます。

Ext.field.Checkbox – 単一のチェックボックスフィールド。
DatePicker – ユーザーがフィールドをタップするとポップアップする日付ピッカーから日付を選択できるフィールド。
Email Field – 値として電子メールアドレスを受け付けるテキストフィールド。一部のデバイスでは、Emailの入力用にカスタマイズされた仮想キーボードを提供します。
File Field – ページ上に HTML ファイル入力フィールドを作成。リモートサーバーにファイルをアップロードするために使用できます。
Hidden Field – 名前と値がフォーム送信パラメータに含まれるが、ユーザーインターフェイスには表示されないフォームフィールド。
Number Field – 数値を受け付けるテキストフィールド。一部のデバイスでは、数値入力用にカスタマイズされた仮想キーボードを提供します。
Password Field – 入力した文字を隠し文字にするテキストフィールド。
Radio Button – 単一のラジオボタン。アプリ内で同じname設定を持つラジオボタンは、いずれかのラジオボタンにのみチェックを入れることができます。
Search Field – 検索によく使用されるテキストフィールド。値をクリアする“x”ボタンが含まれます。
Select Field – いくつかの有効な値から選択することができるフィールド。ユーザーがフィールドをタップしたときの値が、ポップアップピッカーに示されます。
Slider Field – ドラッグ可能なスライダーとして提示される数値フィールド。
Spinner Field – 増加/減少ボタンがついた数値フィールド。
Text Field – シンプルな単一行のテキストフィールド。
TextArea – 複数行のテキストフィールド。
Toggle Field – 2 つの値の切り替えをサポートするフィールド。
URL Field – 値として URL を受け付けるテキストフィールド。一部のデバイスでは、URLの入力用にカスタマイズされた仮想キーボードを提供します。

Last updated

12月 18, 2014