extjs 6.2 현대 양식 자신의 유효성 검사기를 추가하십시오

Question

extjs 6.2.0 최신 응용 프로그램에 자체 양식 검사기를 추가하려면 어떻게합니까? 클래식 :

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

Answer 1

이 반드시 당신이 원하는에 따라 달라집니다,하지만 난 최근에 사용 유효성 검사기를 추가 한 짓을 예를 들어 뷰 모델 바인딩 (모두 고전과 현대 툴킷에서 작동하는 것 같다). 이것은 확실히 필요에 따라 복잡해질 수 있지만, 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' } 
    ] 
});