javascript - extjs 6.2モダンフォームは独自のバリデーターを追加します

Question

extjs 6.2.0 最新のアプリケーションに独自のフォームバリデータを追加するにはどうすればよいですか? クラシックでは:

validator : function(value){
    //do something
}    

Answer 1

これは確かにあなたが望むものに依存しますが、例えば私が最近行ったことは、ViewModel とのバインディングを使用してバリデーターを追加することでした (従来のツールキットと最新のツールキットの両方で機能するようです)。これは確かにニーズに対して複雑すぎるかもしれませんが、ViewModel の式とのバインディングは電子メールの検証に適しているようです。

形：

Ext.define('App.login.LoginForm', {
    extend: 'Ext.form.Panel',

    requires: [ 'App.login.LoginModel' ],
    viewModel: {
        type: 'login'  // references alias "viewmodel.login"
    },

    layout: 'vbox',
    defaultType: 'textfield',
    items: [{
        name: 'login',
        itemId: 'login-fld',
        bind: '{credentials.login}'
    },{
        inputType: 'password',
        name: 'password',
        bind: '{credentials.password}'
    },{
        xtype: 'button',
        text: 'Submit',
        action: 'save',
        bind: {
            disabled: '{!isCredentialsOk}'
        }
    }]
});

ビューモデル:

Ext.define("App.login.LoginViewModel", {
    extend: "Ext.app.ViewModel", 
    alias: 'viewmodel.login',

    links: {
        credentials: {
            reference: 'App.login.LoginModel',
            create: true
        }
    },

    formulas: {
        isCredentialsOk: function (get) {
            return Boolean(get('credentials.login') && get('credentials.password'));
        }
    }

});

モデル：

Ext.define('App.login.LoginModel', {
    extend: 'Ext.data.Model',

    fields: [
        {   name:   'login',    type: 'string', allowBlank: false   },
        {   name:   'password', type: 'string', allowBlank: false   }
    ],

    validators: [
        {   field: 'login',     type: 'presence',   message: 'Login empty'  },
        {   field: 'password',  type: 'presence',   message: 'Password empty'   }
    ]
});