Clear Up
SharpKit Reference

VTypes Class

This is a singleton object which contains a set of commonly used field validation functions and provides a mechanism for creating reusable custom field validations. The following field validation functions are provided out of the box:

  • alpha
  • alphanum
  • email
  • url

VTypes can be applied to a Text Field using the vtype configuration:

  
    Ext.create('Ext.form.field.Text', {
            fieldLabel: 'Email Address',
            name: 'email',
            vtype: 'email' // applies email validation rules to this field
            });
            

To create custom VTypes:

  
// custom Vtype for vtype:'time'
            var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
            Ext.apply(Ext.form.field.VTypes, {
            //  vtype validation function
            time: function(val, field) {
            return timeTest.test(val);
            },
            // vtype Text property: The error text to display when the validation function returns false
            timeText: 'Not a valid time.  Must be in the format "12:34 PM".',
            // vtype Mask property: The keystroke filter mask
            timeMask: /[\d\s:amp]/i
            });
            

In the above example the time function is the validator that will run when field validation occurs, timeText is the error message, and timeMask limits what characters can be typed into the field. Note that the Text and Mask functions must begin with the same name as the validator function.

Using a custom validator is the same as using one of the build-in validators - just use the name of the validator function as the vtype configuration on a Text Field:

  
    Ext.create('Ext.form.field.Text', {
            fieldLabel: 'Departure Time',
            name: 'departureTime',
            vtype: 'time' // applies custom time validation rules to this field
            });
            

Another example of a custom validator:

  
// custom Vtype for vtype:'IPAddress'
            Ext.apply(Ext.form.field.VTypes, {
            IPAddress:  function(v) {
            return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
            },
            IPAddressText: 'Must be a numeric IP address',
            IPAddressMask: /[\d\.]/i
            });
            

It's important to note that using Ext.apply() means that the custom validator function as well as Text and Mask fields are added as properties of the Ext.form.field.VTypes singleton.

Namespace: Ext.form.field

Base Types

Constructors

Methods

Name Description
alpha(JsString) The function used to validate alpha values
alphanum(JsString) The function used to validate alphanumeric values
callOverridden(object) Call the original method that was previously overridden with override
  Ext.define('My.Cat', {
            constructor: function() {
            alert("I'm a cat!");
            }
            });
            My.Cat.override({
            constructor: function() {
            alert("I'm going to be a cat!");
            this.callOverridden();
            alert("Meeeeoooowwww");
            }
            });
            var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
            // alerts "I'm a cat!"
            // alerts "Meeeeoooowwww"
            

This method has been deprecated

as of 4.1. Use callParent instead.

callParent(object) Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).
  Ext.define('My.Base', {
            constructor: function (x) {
            this.x = x;
            },
            statics: {
            method: function (x) {
            return x;
            }
            }
            });
            Ext.define('My.Derived', {
            extend: 'My.Base',
            constructor: function () {
            this.callParent([21]);
            }
            });
            var obj = new My.Derived();
            alert(obj.x);  // alerts 21
            
This can be used with an override as follows:
  Ext.define('My.DerivedOverride', {
            override: 'My.Derived',
            constructor: function (x) {
            this.callParent([x*2]); // calls original My.Derived constructor
            }
            });
            var obj = new My.Derived();
            alert(obj.x);  // now alerts 42
            
This also works with static methods.
  Ext.define('My.Derived2', {
            extend: 'My.Base',
            statics: {
            method: function (x) {
            return this.callParent([x*2]); // calls My.Base.method
            }
            }
            });
            alert(My.Base.method(10);     // alerts 10
            alert(My.Derived2.method(10); // alerts 20
            
Lastly, it also works with overridden static methods.
  Ext.define('My.Derived2Override', {
            override: 'My.Derived2',
            statics: {
            method: function (x) {
            return this.callParent([x*2]); // calls My.Derived2.method
            }
            }
            });
            alert(My.Derived2.method(10); // now alerts 40
            
email(JsString) The function used to validate email addresses. Note that this is a very basic validation - complete validation per the email RFC specifications is very complex and beyond the scope of this class, although this function can be overridden if a more comprehensive validation scheme is desired. See the validation section of the Wikipedia article on email addresses for additional information. This implementation is intended to validate the following emails:
  • barney@example.de
  • barney.rubble@example.com
  • barney-rubble@example.coop
  • barney+rubble@example.com
  • getInitialConfig(object) Returns the initial configuration passed to constructor when instantiating this class.
    initConfig(object) Initialize configuration for this class. a typical example:
      Ext.define('My.awesome.Class', {
                // The default config
                config: {
                name: 'Awesome',
                isAwesome: true
                },
                constructor: function(config) {
                this.initConfig(config);
                }
                });
                var awesome = new My.awesome.Class({
                name: 'Super Awesome'
                });
                alert(awesome.getName()); // 'Super Awesome'
                
    statics() Get the reference to the class from which this object was instantiated. Note that unlike self, this.statics() is scope-independent and it always returns the class from which it was called, regardless of what this points to during run-time
      Ext.define('My.Cat', {
                statics: {
                totalCreated: 0,
                speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
                },
                constructor: function() {
                var statics = this.statics();
                alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
                // equivalent to: My.Cat.speciesName
                alert(this.self.speciesName);   // dependent on 'this'
                statics.totalCreated++;
                },
                clone: function() {
                var cloned = new this.self;                      // dependent on 'this'
                cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
                return cloned;
                }
                });
                Ext.define('My.SnowLeopard', {
                extend: 'My.Cat',
                statics: {
                speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
                },
                constructor: function() {
                this.callParent();
                }
                });
                var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
                var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
                var clone = snowLeopard.clone();
                alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
                alert(clone.groupName);                 // alerts 'Cat'
                alert(My.Cat.totalCreated);             // alerts 3
                
    url(JsString) The function used to validate URLs

    Properties

    Name Description
    alphaMask The keystroke filter mask to be applied on alpha input. Defaults to: /[a-z_]/i Defaults to: /[a-z_]/i
    alphanumMask The keystroke filter mask to be applied on alphanumeric input. Defaults to: /[a-z0-9_]/i Defaults to: /[a-z0-9_]/i
    alphanumText The error text to display when the alphanumeric validation function returns false. Defaults to: 'This field should only contain letters, numbers and _' Defaults to: "This field should only contain letters, numbers and _"
    alphaText The error text to display when the alpha validation function returns false. Defaults to: 'This field should only contain letters and _' Defaults to: "This field should only contain letters and _"
    emailMask The keystroke filter mask to be applied on email input. See the email method for information about more complex email validation. Defaults to: /[a-z0-9_.-@]/i Defaults to: /[a-z0-9_\.\-@\+]/i
    emailText The error text to display when the email validation function returns false. Defaults to: 'This field should be an e-mail address in the format "user@example.com"' Defaults to: "This field should be an e-mail address in the format "user@example.com""
    urlText The error text to display when the url validation function returns false. Defaults to: 'This field should be a URL in the format "http:/'+'/www.example.com"'
    © Copyright 2005-2011 SharpKit. All rights reserved.