Creating custom vTypes in Sencha Architect 3.0

Question

How can I create custom vtypes for form fields validation in Sencha Architect 3.0. I have only found a way to include the already built in types but I want to create a custom one and include it.

Answer 1

1. Create a new js based resource (or use existing one).

2. Define vtype

   Ext.apply(Ext.form.field.VTypes, {
       myFancyValidator: function(val, field) {
           //... returns true if valid, false if not
       }
   }
   

3. On the Project Inspector, browse to the field/editor that you want to validate

4. Apply vtype:'myFancyValidator'

Answer 2

Inside of architect click on the + in the project inspector to bring up the Add menu.

Select Resources-> JS Resources.

Set the URL to a location (resources/myVtypes.js) * this is a file system location so don't include the trail slash unless you want the root directory.

Right click on the resource and select Edit Code -- this will bring up a blank file that you can paste the class into -- and edit it within architect.

Save the project normally to update resource.

Answer 3

Here sample example for create custom vtype for validate pincode numbers:

Ext.define('Ext.form.field.VTypes', {

    pin: /(?!(.)\1\1).{3}/,

    init: function () {
        var me = this;

        //pin number
        this.pinFn();
        //etc..
    },
    pinFn:function () {
        var me = this;

        Ext.apply(Ext.form.field.VTypes, {
            pin:function (val, field) {
                //check value
                return me.pin.test(val);
            },
            pinText: 'Wrong PIN number (numbers cannot be identical)'
        });
    }
});

After creation you can include in your form

{

fieldLabel: 'PIN Number',

name: 'pin',

minLength: 4,

maxLength: 4,

vtype: 'pin' //coustom vtype

},