読者です 読者をやめる 読者になる 読者になる

初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

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

ExtJS

よく使うようなバリデーションチェックは、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'
        }
    ]
});

f:id:sham-memo:20170304153836p:plain

f:id:sham-memo:20170304153846p:plain

期待通りの動作をしました。

バリデーションチェックの部分は、正規表現を駆使すれば色々なチェックができます。ただし、他の入力フィールドの値に応じて動的にチェックが変わるような複合チェックは無理なので、そういう場合はvalidatorを使うようにしましょう。