(ExtJS6.5)フォームの新機能[modern] (1)

今回からExtJS6.5のフォームの変更点を挙げていきます。

バリデーション

バリデーションは大きく変わり、classicに寄せられました。

以前のバリデーション機能はモデル側で実装されており、フォームの各フィールドで設定できるのはごくわずかでした。

しかし、今回の変更でフィールドに直接バリデーションの内容を指定できるようになり、また、エラーメッセージも表示されるようになっています(ようやく)。

/**
 * ユーザ登録フォームクラス。
 *
 * @class Sample.view.user.regist.Form
 * @extend Ext.form.Panel
 */
Ext.define('Sample.view.user.regist.Form', {
    extend: 'Ext.form.Panel',
    xtype: 'user_regist_form',

    requires: [
        'Ext.field.Text',
        'Ext.field.Date',
        'Ext.field.Radio',
        'Ext.field.Container',
        'Ext.data.validator.Email',
        'Sample.view.user.regist.FormViewController'
    ],

    controller: 'user_regist_form',

    cls: 'user-regist-form',

    title: 'ユーザ登録',

    items: [
        {
            xtype: 'emailfield',
            label: 'メールアドレス',
            name: 'mailAddress',
            required: true,
            maxLength: 255,
            validators: 'email'
        },
        {
            xtype: 'textfield',
            label: '氏名',
            name: 'name',
            required: true
        },
        {
            xtype: 'textfield',
            label: 'フリガナ',
            name: 'kana',
            required: true
        },
        {
            xtype: 'datefield',
            label: '生年月日',
            name: 'birthday'
        },
        {
            xtype: 'containerfield',
            layout: 'vbox',
            label: '性別',
            margin: '20 0 0',
            items: [
                {
                    xtype: 'radiofield',
                    name: 'gender',
                    label: '男性',
                    value: 1
                },
                {
                    xtype: 'radiofield',
                    name: 'gender',
                    label: '女性',
                    value: 2
                }
            ]
        }
    ],

    buttons: {
        save: {
            text: '登録',
            ui: 'action',
            handler: 'onClickSaveButton'
        }
    }
});

/**
 * ユーザ登録フォームのビューコントローラクラス。
 *
 * @class Sample.view.user.regist.FormViewController
 * @extend Ext.app.ViewController
 */
Ext.define('Sample.view.user.regist.FormViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.user_regist_form',

    /**
     * 保存ボタンクリック時の処理。
     */
    onClickSaveButton: function () {
        var me = this,
            view = me.getView();

        if (view.validate()) {
            // TODO: エラーが無い場合の処理をここに記述
        }
    }
});

複数のチェックがある場合はvalidatorsに配列を指定できます。

validators: [
    'url',
    { type: 'length', max: 140 }
]

モデルで定義していたバリデーション定義を、そのままフィールドに移した感じです。

バリデーション用のクラスは、Ext.data.validatorパッケージに存在します。

また、エラーメッセージの表示はフィールドのerrorTargetコンフィグで変更できます。

たとえば、errorTarget: 'under'とすれば↓のように表示されます。

いやー、ようやくclassicに追いつきましたね！

Ext.field.InputMask

入力形式のアシスト機能として、Ext.field.InputMaskが実装されました。

どういうことができるかというと、↓のカード番号入力のようなことです。(こういう入力って一般的な名称があるんでしょうか・・)

時々、サポートしているサイトがありますが、入力しやすくて便利ですよね。これがサポートされたのはうれしい限りです。

もう少しUIとかスタイルをキレイにできるのかな？