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.

score 3 · Accepted Answer · answered Mar 19 '14 at 17:35

3

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

Define vtype

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

On the Project Inspector, browse to the field/editor that you want to validate
Apply vtype:'myFancyValidator'

answered Mar 19 '14 at 17:35

monstergold

755
1
9
24

Great answer. What are the advantages of using a vtype over the validator function? – Jacob Mar 19 '14 at 17:56
Underneath the vtype there is probably a validator function. See this link : http://docs.sencha.com/extjs/4.2.0/source/VTypes.html – monstergold Mar 20 '14 at 11:52

score 0 · Answer 2 · answered Sep 19 '16 at 14:25

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.

score -1 · Answer 3 · answered Mar 19 '14 at 14:19

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

},

How to do this in Architect? You missed that part – Jacob Mar 19 '14 at 14:33 — Jacob, Mar 19 '14 at 14:33

Creating custom vTypes in Sencha Architect 3.0

3 Answers3