独自バリデーションをExt.form.field.VTypesに追加する[classic]

よく使うようなバリデーションチェックは、Ext.form.field.VTypesに追加しておくと便利です。

追加したバリデーションは、alphaなどのようにvtypeで使えるようになります。

Ext.form.field.VTypesのオーバーライド

オーバーライドクラスには、最低限、バリデーションチェックとエラーメッセージを追加する必要があります。

/**
 * Ext.form.field.VTypesのオーバーライドクラス。
 *
 * @class Sample.overrides.form.field.VTypes
 * @override Ext.form.field.VTypes
 */
Ext.define('Sample.overrides.form.field.VTypes', {
    override: 'Ext.form.field.VTypes',

    hiragana: function(v) {
        return /^[ぁ-んー ]*$/.test(v);
    },

    hiraganaText: '平仮名で入力してください。'
});

バリデーションチェック用のメソッド名が、vtypeに指定する文字列となります。上記のコードの場合はhiraganaです。

エラーメッセージは、vtypeの文字列に"Text"を付与したプロパティ名にします。上記コードの場合は、hiraganaTextです。

使ってみよう

実際に組み込んでみます。

/**
 * 商品登録フォームクラス。
 * 
 * @class Sample.view.main.Form
 * @extend Ext.form.Panel
 */
Ext.define('Sample.view.main.Form', {
    extend: 'Ext.form.Panel',
    xtype: 'main_form',

    bodyPadding: 20,

    defaults: {
        anchor: '100%',
        labelAlign: 'top',
        labelSeparator: '',
        msgTarget: 'under'
    },

    items: [
        {
            xtype: 'textfield',
            fieldLabel: '氏名'
        },
        {
            xtype: 'textfield',
            fieldLabel: 'かな',
            vtype: 'hiragana'
        }
    ]
});