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

Question

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

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

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

//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',
      .
      .
      .

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

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'
}