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

Publish date: 2024-05-02

I am using EXT JS as a front end framework for a project. I have wrote a custom field validation function that can be accessed by "vtype" property. The functions work ok when they are in the same file that are used locally on that file for field validation.

For example in vtype that I want to check the textfield value is English or not, The below code works Ok

using validation in the same file that form is created

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

The problem is when I want to use this functions globally in whole project forms I can not use them anymore for forms field validations. I have a file name Utility that I defined my global functions as static variables in it.

global static functions in Utilities.js file

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 });

calling the custom defined vtype in form

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

I modified my code several time but I can not apply the validation by calling smp.Utilities.valEng(this.getValue())

2 Answers

You can define your custom Vtypes in a separate file that works globally with something like this.

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); } }); 

Make sure it gets required by your application.

Ext.define('MyApp.Application', { extend: 'Ext.app.Application', requires: [ 'MyApp.overrides.form.field.VTypes' ], ... launch: function() { ... } }); 

And you're free to use the vtype eng anywhere you like.

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

You should use validation type name to use custom Vtypes (http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.form.field.Text-cfg-vtype)

In your case it should be

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

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJoaXFwZG5%2BeYKOoaawZaSkera%2FxGaarqukpLpuwtOyp56rXZ67br%2FEqZirmaSaeqe1y55kraddqsCmedOhnKZll6G8o63LpbBmoZ5isrnAjKOq