如何在单独的文件中使用自定义Vtypes以在EXT.JS中全局使用它们

Question

我使用EXT JS作为项目的前端框架。我编写了一个自定义字段验证函数，可以通过“vtype”属性访问。当这些函数位于该文件本地使用的同一文件中以进行字段验证时，这些函数可以正常工作。

例如在vtype中我想检查textfield值是否为英文，下面的代码工作正常

在创建表单的同一文件中使用验证

//create a custom vtype for english text fields  
var engTest = /^[a-zA-Z0-9\s]+$/;
Ext.apply(Ext.form.field.VTypes, {
  //  vtype validation function
  eng: function(val, field) {
    return engTest.test(val);
  },
  // vtype Text property: The error text to display when the validation   function returns false
  engText: 'Write it in English Please',
  // vtype Mask property: The keystroke filter mask
  engMask: /[a-zA-Z0-9_\u0600-\u06FF\s]/i
});
.
.

layout: 'form',
  border: false,
  items: [{
      xtype: 'textfield',
      fieldLabel: 'Title (en)',
      name: 'title',
      vtype: 'eng',
      msgTarget: 'under',
      .
      .
      .

问题是当我想在整个项目表单中全局使用这个函数时我不能再使用它们来进行表单字段验证。我有一个文件名实用程序，我将全局函数定义为static变量在里面。

Utilities.js文件中的全局静态函数

var statics = {
  /*
    these are js functions can be used all over the project
   */

  func1: function(input) {

  },
  func2: function(input) {

  },
  .
  .
  .
  valEng: function(val) {
    var engTest = /^[a-zA-Z0-9\s]+$/;
    Ext.apply(Ext.form.field.VTypes, {
      //  vtype validation function
      eng: function(val, field) {
        return engTest.test(val);
      },
      // vtype Text property: The error text to display when the validation   function returns false
      engText: 'Write it in English Please',
      // vtype Mask property: The keystroke filter mask
      engMask: /[a-zA-Z0-9_\u0600-\u06FF\s]/i
    });
  }

};


Ext.define('smp.utility.Utilities', {
  alternateClassName: 'smp.Utilities',
  statics: statics
});

以表单

调用自定义vtype

layout: 'form',
  border: false,
  items: [{
      xtype: 'textfield',
      fieldLabel: 'Title (en): ',
      name: 'title_en',
      vtype: smp.Utilities.valEng(this.getValue()),
      msgTarget: 'under',
      .
      .
      .
    },
    .
    .
    .
    .

我修改了我的代码几次，但是我无法通过调用 smp.Utilities.valEng（this.getValue（））来应用验证

Answer 1

您可以在一个单独的文件中定义自定义Vtypes，该文件可以全局使用。

Ext.define('MyApp.overrides.form.field.VTypes', {
    override: 'Ext.form.field.VTypes',

    eng: function(val, field) {
      return engTest.test(val);
    },
    engText: 'Write it in English Please',
    engMask: /[a-zA-Z0-9_\u0600-\u06FF\s]/i,

    phoneText: 'This is not a valid phone number',
    phoneMask: /[\d\-\+()\s\.\/\\]/,
    phoneRe: /^[\d\-\+()\s\.\/\\]{5,20}$/,
    phone: function(v) {
        return this.phoneRe.test(v);
    }
});

确保您的应用程序需要它。

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',

    requires: [
        'MyApp.overrides.form.field.VTypes'
    ],

    ...

    launch: function() {
        ...
    }
});

您可以随意在任何地方使用vtype eng。

{
    xtype: 'textfield',
    fieldLabel: 'Title (en): ',
    name: 'title_en',
    vtype: 'eng',
    msgTarget: 'under'
}

Answer 2

您应该使用验证类型名称来使用自定义Vtypes（http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.form.field.Text-cfg-vtype）

在你的情况下它应该是

layout: 'form',
border: false,
items: [{
  xtype: 'textfield',
  fieldLabel: 'Title (en): ',
  name: 'title_en',
  vtype: 'eng',
  msgTarget: 'under',
  .
  .
  .
},