Custom VType in MVC style?

Do you have your Ext.form.* stuff being required anywhere else? Sounds like it'd be the order that things are being executed causing it. What would happen if you put a

Code:

---

requires: 'Ext.form.field.VTypes'

---

or something in there to make sure it is loaded first?

I have a initial solution for this (still learning Ext JS 4) and that is to create a generic singleton class and place it in an appropriately named subdirectory of app. The code is as follows:

Ext.define('MyApp.util.Validation', {

singleton : true,
// Add as many as you want
nameValidation: function() {
Ext.form.VTypes["nameVal"] = /^[a-zA-Z][-_ '.a-zA-Z0-9]{0,50}$/;
Ext.form.VTypes["name"] = function(v){
return Ext.form.VTypes["nameVal"].test(v);
};
Ext.form.VTypes["nameText"] = "Name must begin with a letter and cannot exceed 50 characters";
Ext.form.VTypes["nameMask"] = /[-_ .a-zA-Z0-9']/;
},
// Execute all the the above functions in one place
registerVtypes: function() {
// Call additional functions here
this.nameValidation();
}

});

Then, in app.js:

launch: function() {
Ext.require('MyApp.util.Validation');
}

And finally in the view using the custom vtypes:

var rvt = MyApp.util.Validation.registerVtypes();

On the field:

vtype: 'name'

Hopefully, someone with more OO Javascript experience will see a smarter, less clumsy way to do this.

I used the following in Validation.js

Code:

---

Ext.define('MyApp.util.Validation', {

        singleton : true,
       
        // Validate a CIDR net
        cidrValidation : function() {
            Ext.form.field.VTypes.cidrVal = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\/\d{1,2}$/;
            Ext.form.field.VTypes.cidr = function(toCheck){
                return Ext.form.field.VTypes.cidrVal.test(toCheck);
            }
           
            Ext.form.field.VTypes.cidrText = "Must be a valid CIDR network in the form 192.168.1.0/24";
        }
       
   
    },
   
    function() {
        console.log('registered VTypes');
        this.cidrValidation();
        //add more here
    }

);

---

And in app.js

Code:

---

    launch: function() {
        Ext.require('MyApp.util.Validation');
    },

---

The meant I did not need to put a function call in each view such as:

Code:

---

var rvt = MyApp.util.Validation.registerVtypes();

---

HTH someone. If there is a more "best practise" way would be nice to know.