Make custom validations in EXTJS as components

Question

I have written custom validations like below

Ext.apply(Ext.form.field.VTypes, {
    valInt: function(v) {
        return /^(\d+(,\d+)*)?$/.test(v);
    },
    valIntText: 'Must be in the form #,#',
    valIntMask: /[\d\,]/i
});

It works. But i want to make all such custom validation in a single file and then load it or auto load it. How do i do it?

I can do like below in app.js

 Ext.onReady(function() {    
  Ext.apply(Ext.form.field.VTypes, {
        valInt: function(v) {
            return /^(\d+(,\d+)*)?$/.test(v);
        },
        valIntText: 'Must be in the form #,#',
        valIntMask: /[\d\,]/i
    });
});

But then the app.js file will become big after all validations.

Answer 1

According to the documentation you can create an override, like:

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

    valInt: function(v) {
        return /^(\d+(,\d+)*)?$/.test(v);
    },

    valIntText: 'Must be in the form #,#',

    valIntMask: /[\d\,]/i
});

---

In your app.json there is a overrides key that declares the override directories, it looks like:

/**
   * Comma-separated string with the paths of directories or files to search. Any classes
   * declared in these locations will be automatically required and included in the build.
   * If any file defines an Ext JS override (using Ext.define with an "override" property),
   * that override will in fact only be included in the build if the target class specified
   * in the "override" property is also included.
   */
  "overrides": [
    "overrides",
    "${toolkit.name}/overrides"
  ],