View Full Version : Change class prototype properties/config (ie, global defaults for form elements)?

15 Aug 2011, 11:28 AM
I would like to change the following config options globally for my app:
1. maxLength - defaults to Number.MAX_VALUE (infinity) ... I would like to set it to say maybe 100.
2. validationEvent: defaults to 'keyup'.... I would like to set it to 'blur'
3. validationDelay: defaults to 250. I might want to set this to something like 1500 if I dont change the validationEvent.

1. I do not want to change the EXTJS library of code... I would rather do this with Ext.extend or something in my application in order to modify the properties of the superclass (eg Ext.form.TextField).
2. I do not want to add maxLength, validationEvent, and valiadationDelay to all of the form fields in my app. I want to do it in one place and have all the associated fields inherit from the modification of the class.

If you know how to do this please advise with the code you used.

Thx for your help,


16 Aug 2011, 1:02 AM
Ext.form.TextField.prototype.maxLength = 100;
Ext.form.Field.prototype.validationEvent = 'blur';
Ext.form.Field.prototype.validationDelay = 1500;

16 Aug 2011, 10:25 AM
Yes, this works, I figured it out yesterday afternoon.
One catch with it is that prototype classes have subClasses, so if you dont want the subclass to inherit your change then you have to set the subclass back to the default.

Question: what is the different between assigning the values this way vs using OVERRIDE?

Below is my code to assign global config options.
I need to do a lot of validatation, so I created several custom vtypes. 'Generic' is the basic vtype.
My custom vtypes call a function with passed arguments (regex, max length, id, etc, etc). The function trims, converts case if needed, does a regex replace, and truncates the field to maxLength..

/** TextField Defaults
* Subclasses: NumberField, TextArea, TriggerField
* Extends: Field
Ext.form.TextField.prototype.vtype = 'generic'; //** default: null
Ext.form.TextField.prototype.maxLength = 50; //** default: number:MAX_NUMBER (infinity)
//Ext.form.TextField.prototype.validationEvent = 'blur'; //** default: keyup
Ext.form.TextField.prototype.validationDelay = 1500; //** default:250...setting to 1500 to allow time for user to complete before trimming

/** TextArea Defaults
* Subclasses: none
* Extends: TextField
Ext.form.TextArea.prototype.vtype = 'generic';
Ext.form.TextArea.prototype.maxLength = 250;
Ext.form.TextField.prototype.validationEvent = 'blur';

/** NumberField Defaults
* Subclasses: none
* Extends: TextField
Ext.form.NumberField.prototype.vtype = ''; //** null to stop any inheritance
Ext.form.NumberField.prototype.maxLength = 50; //** DB fields truncate at 50
Ext.form.NumberField.prototype.validationEvent = 'keyup'; // number field only allows digits, OK for keyup cuz no spaces
Ext.form.NumberField.prototype.validationDelay = 250;

/** ComboBox Defaults
* Subclasses: TimeField
* Extends: TriggerField
Ext.form.ComboBox.prototype.vtype = ''; //** null to stop any inheritance
Ext.form.ComboBox.prototype.editable = false; //** select an option, no typing

/** DateField Defaults
* Subclasses: none
* Extends: TriggerField
Ext.form.DateField.prototype.vtype = ''; //** null to stop any inheritance
Ext.form.DateField.prototype.editable = false; //** select date, no typing

16 Aug 2011, 12:41 PM
Question: what is the different between assigning the values this way vs using OVERRIDE?

Ext.override is shorter in code and is more efficient since property lookups aren't performance-free in JavaScript.

//Basically, this is faster
var c = MyNS.MyClass.prototype;
c.prop1 = 1;
c.prop2 = 2;
c.prop3 = 3;

//than this
MyNS.MyClass.prototype.prop1 = 1;
MyNS.MyClass.prototype.prop2 = 2;
MyNS.MyClass.prototype.prop3 = 3;

//for the same reason, this is faster
for (var i = 0, len = myArray.length; i < len; i++) {};

//than this
for (var i = 0; i < myArray.length; i++) {};