フォーム

Form Panelは基本のPanelにフォームを処理する能力が追加されているだけです。Form Panelはユーザーからデータを収集する必要がある場合、どこでもExtアプリケーション全体で使用できます。

また、Form Panelは、どのようなコンテナレイアウトでも使用でき、そのフィールドの位置を処理する便利で柔軟な方法を提供します。Form PanelはModelにバインドすることも可能で、サーバーからデータをロードしたり、データをサーバーへ戻したりすることも簡単に実行できます。

内部で、Form Panelは、入力フィールドの管理、バリデーション、送信、およびフォームのロードサービス全てを処理するBasic Formをラップしています。これは、基本的なフォームの設定オプションがForm Panel上で直接利用することができることを意味しています。

基本Form Panel

まずは、ユーザーデータを収集する簡単なフォームを作成する方法です:

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'User Form',
    height: 150,
    width: 300,
    bodyPadding: 10,
    defaultType: 'textfield',
    items: [
        {
            fieldLabel: 'First Name',
            name: 'firstName'
        },
        {
            fieldLabel: 'Last Name',
            name: 'lastName'
        },
        {
            xtype: 'datefield',
            fieldLabel: 'Date of Birth',
            name: 'birthDate'
        }
    ]
});

このフォームは、document bodyに自身をレンダリングし、“First Name”、“Last Name”、“Date of Birth”という3つのフィールドがあります。フィールドはアイテムを使用して、Form Panelに使用して追加されます。

fieldLabelコンフィグはフィールドの横のラベルに表示されるテキストを定義し、nameコンフィグは基底のHTMLフィールドのname属性になります。

このForm Panelがどのように’textfield’のdefaultTypeを持つかに注意してください。つまり、xtype（この例では“First Name”、“Last Name”）が指定されていないアイテムはすべてText Fieldです。

一方、“Date of Birth”フィールドは、そのxtypeが’datefield’として明示的に定義され、Dateフィールドになっています。Dateフィールドは有効な日付データだけを含むと考えられ、日付の選択にDatePickerが搭載されています。

フィールド

フィールドタイプ

Ext JSは、創造的な標準のフィールドタイプのセットを提供します。どのExt.form.field名前空間内のフィールドもForm Panelで使用することができます。詳細については、各フィールドタイプのAPIドキュメントを参照してください。

• Ext.form.field.Checkbox
• Ext.form.field.ComboBox
• Ext.form.field.Date
• Ext.form.field.Display
• Ext.form.field.File
• Ext.form.field.Hidden
• Ext.form.field.HtmlEditor
• Ext.form.field.Number
• Ext.form.field.Radio
• Ext.form.field.Text
• Ext.form.field.TextArea
• Ext.form.field.Time

バリデーション

1.組み込みバリデーション Ext JSはどのタイプのフィールドにもバリデーションが組み込まれていて、いくつかのフィールドにはバリデーションルールが組み込まれています。

たとえば、Date フィールドに値が入力され、その値が Date に変換できなかった場合、そのフィールドには、HTML 要素に追加された x-form-invalid-field という CSS クラスがあります。

必要な場合、このCSSクラスは、invalidClsコンフィグを使用して変更できます。デフォルトのテーマ設定では invalidCls を追加して、赤い “invalid 下線” を追加しています。

無効なデータが含まれているフィールドには、エラーメッセージが表示されます。デフォルトでは、このメッセージがツールチップとして表示されます:

フィールドのエラーメッセージの場所を変更するにはmsgTargetコンフィグを使用します。 また、invalidTextコンフィグはエラーメッセージを変更します。

各フィールドには、独自のinvalidTextの実装を提供し、エラーメッセージ内での表示の変更を多くサポートします。

たとえば、Dateフィールドの中のinvalidTextでは、“{0}”はフィールドの値で置換され、“{1}”は必要な日付フォーマットで置換されます。

次のコードは、直接フィールドの下にエラーメッセージを配置し、エラーメッセージテキストをカスタマイズしています。

{
    xtype: 'datefield',
    fieldLabel: 'Date of Birth',
    name: 'birthDate',
    msgTarget: 'under', // location of the error message
    invalidText: '"{0}" bad. "{1}" good.' // custom error message text
}

2.カスタムバリデーション いくつかのバリデーション要件は、組み込みバリデーションでは出来ません。カスタムバリデーションを実装する最も簡単な方法は、Textフィールドのregexコンフィグを使用してバリデーション規則を適用し、maskReコンフィグを使用して、フィールドに入力できる文字を制限することです。これは時間を検証するテキストフィールドのサンプルです。

{
    fieldLabel: 'Last Login Time',
    name: 'loginTime',
    regex: /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i,
    maskRe: /[\d\s:amp]/i,
    invalidText: 'Not a valid time.  Must be in the format "12:34 PM".'
}

上記の方法は、単一のフィールドを検証には効果を発揮しますが、同じカスタム検証を多くのフィールドで共有するアプリケーションでは実用的ではありません。

Ext.form.field.VTypes クラスは再利用可能なカスタム検証を作成するためのソリューションを提供します。カスタム“time”バリデータの作成方法:

// custom Vtype for vtype:'time'
var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
Ext.apply(Ext.form.field.VTypes, {
    //  vtype validation function
    time: function(val, field) {
        return timeTest.test(val);
    },
    // vtype Text property: The error text to display when the validation function

returns false timeText: ‘Not a valid time. Must be in the format “12:34 PM”.’, // vtype Mask property: The keystroke filter mask timeMask: /[\d\s:amp]/i });

カスタムバリデータが作成された後、vtype コンフィグを使用するとアプリケーション全体のテキストフィールドで使用できます。

{
    fieldLabel: 'Last Login Time',
    name: 'loginTime',
    vtype: 'time'
}

動作するデモはバリデーションのサンプルを参照ください。カスタムバリデーションの詳細はVTypesのAPIマニュアルを参照してください。

データの処理

フォームを送信する

サーバーにデータを送信する最も簡単な方法は、Basic Formのurlコンフィグを使用することです。Form PanelはBasic Formをラップしているので、Form Panel上のBasic Formのコンフィグオプションを直接使用できます。

Ext.create('Ext.form.Panel', {
    ...
    url: 'add_user',
    items: [
        ...
    ]
});

Basic Formのsubmitメソッドは設定されたurlへデータを送信するために使用できます。

Ext.create('Ext.form.Panel', {
    ...
    url: 'add_user',
    items: [
        ...
    ],
    buttons: [
        {
            text: 'Submit',
            handler: function() {
                var form = this.up('form').getForm(); // get the basic form
                if (form.isValid()) { // make sure the form contains valid data before

submitting form.submit({ success: function(form, action) { Ext.Msg.alert(‘Success’, action.result.msg); }, failure: function(form, action) { Ext.Msg.alert(‘Failed’, action.result.msg); } }); } else { // display error alert if the data is invalid Ext.Msg.alert(‘Invalid Data’, ‘Please correct form errors.’) } } } ] });

上記の例では、ボタンにはフォームの送信を処理するハンドラが設定されています。ハンドラは、次のアクションを実行します:

1. 最初にBasic Formへの参照を取得する必要があります。
2. 次に、フィールドにバリデーションエラーがないことを確認するために、送信前にisValidメソッドが呼び出されます。
3. 最後にsubmitメソッドが呼び出され、2つのコールバック関数successとfailureが渡されます。これらのコールバック関数内ではaction.resultが解析されたJSONレスポンスを参照します。

上記の例は次のようなJSONレスポンスになります:

{ "success": true, "msg": "User added successfully" }

モデルにフォームをバインドする

モデルクラスはExt JS全体で使用されて、さまざまな種類のデータを表現するだけでなく、サーバー上のデータを取得し、更新します。ユーザーを示すモデルは、ユーザーが持っているフィールドだけでなく、データの読み込みと保存のためのプロキシを定義します。

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['firstName', 'lastName', 'birthDate'],
    proxy: {
        type: 'ajax',
        api: {
            read: 'data/get_user',
            update: 'data/update_user'
        },
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

データはloadRecordメソッドを使ってModelからForm Panelに直接ロードできます。

Ext.ModelMgr.getModel('User').load(1, { // load user with ID of "1"
    success: function(user) {
        userForm.loadRecord(user); // when user is loaded successfully, load the data

into the form } });

最後に、submitメソッドを使用してデータを保存する代わりに、Basic FormのupdateRecordメソッドを使用して、フォームデータでレコードを更新します。 するとModelのsaveメソッドが呼び出されてデータがサーバーに保存されます。

Ext.create('Ext.form.Panel', {
    ...
    url: 'add_user',
    items: [
        ...
    ],
    buttons: [
        {
            text: 'Submit',
            handler: function() {
                var form = this.up('form').getForm(), // get the basic form
                    record = form.getRecord(); // get the underlying model instance
                if (form.isValid()) { // make sure the form contains valid data before

submitting form.updateRecord(record); // update the record with the form data record.save({ // save the record to the server success: function(user) { Ext.Msg.alert(‘Success’, ‘User saved successfully.’) }, failure: function(user) { Ext.Msg.alert(‘Failure’, ‘Failed to save user.’) } }); } else { // display error alert if the data is invalid Ext.Msg.alert(‘Invalid Data’, ‘Please correct form errors.’) } } } ] });

モデルのバインディングのサンプル

レイアウト

レイアウトは、Ext JS アプリケーション内のコンポーネントのサイズと位置を処理するために使用されています。Form PanelはどのContainer Layoutでも使用できます。さらなる情報はレイアウトとコンテナを参照してください。

たとえば、フォームで水平方向にフィールドを配置するには、HBoxレイアウトを使用すると簡単に実行できます。

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'User Form',
    height: 120,
    width: 585,
    defaults: {
        xtype: 'textfield',
        labelAlign: 'top',
        padding: 10
    },
    layout: {
        type: 'hbox'
    },
    items: [
        {
            fieldLabel: 'First Name',
            name: 'firstName'
        },
        {
            fieldLabel: 'Last Name',
            name: 'lastName'
        },
        {
            xtype: 'datefield',
            fieldLabel: 'Date of Birth',
            name: 'birthDate'
        }
    ]
});