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

How to use custom Vtypes in separate file to use them globally in EXT.JS

本文关键字：EXT JS 全局 自定义 单独 文件 Vtype      更新时间：2023-09-26

我正在使用EXTJS作为项目的前端框架。我已经编写了一个自定义字段验证函数，该函数可以通过"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',
      .
      .
      .

问题是当我想在整个项目表单中全局使用这些函数时，我不能再将它们用于表单字段验证了我有一个文件名Utility，我在其中将全局函数定义为静态变量。

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（））

来应用验证

您可以在一个单独的文件中定义您的自定义Vtype，该文件可以全局使用类似的东西。

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

您应该使用验证类型名称来使用自定义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',
  .
  .
  .
},
相关文章：