Override of methods in ExtJS controls

Sometimes the form prompts in Ext are not so satisfactory, so we will think of the method to rewrite it, so I will write a few examples to try:

Ext. form. FormPanel. prototype. submit = function (){ If (! This. form. isValid (true )) This. validateItems (); Else Return this. form. submit. apply (this. form, arguments) } // ## Extended form verification Ext. form. FormPanel. prototype. validateItems = function () { Try { Var items = this. items. items; Var blanks = ""; Var errorFields = []; For (var I = 0; I <items. length; I ++) { If (! Items [I]. isValid (true )) { If (items [I]. blankText. indexOf ("This is") =-1) Items [I]. blankText = items [I]. fieldLabel + "cannot be blank! "; Blanks + = items [I]. blankText + "<br/> "; ErrorFields. push (items [I]); } } Balancer = balancer. substr (0, balancer. length-5 ); Ext. Msg. show ( { Title: 'verification information ', Icon: Ext. MessageBox. ERROR, Buttons: Ext. MessageBox. OK, Width: 350, Msg: blanks. toString (), Fn: function () { For (var I = 0; I <errorFields. length; I ++) { ErrorFields [I]. reset (); } ErrorFields [0]. selectText (); ErrorFields = null; Return; } }); } Finally { Blanks = null; Items = null; } }; Ext. form. BasicForm. prototype. validateItems = Ext. form. FormPanel. prototype. validateItems;

This is an example of Form Verification. Put another code that adds the vtype:

Ext. apply (Ext. form. VTypes ,{ Password: function (val, field ){ If (field. passField ){ Var pwd = Ext. getCmp (field. passField ); Return (val = pwd. getValue ()); } Return true; }, PasswordText: 'The passwords entered twice are inconsistent! ' });

The above is to verify whether the two passwords are consistent. Sometimes it is uncomfortable to see the allowBlank prompt in FormPanel, the prompt "this input item is mandatory" is always uncomfortable, so I changed it to this "user name cannot be blank!" And so on. The code for rewriting Ext is as follows:

Ext. form. TextField. prototype. validateValue = function (value ){ If (Ext. isFunction (this. validator )){ Var msg = this. validator (value ); If (msg! = True ){ This. markInvalid (msg ); Return false; } } If (value. length <1 | value = this. emptyText ){ If (this. allowBlank ){ This. clearInvalid (); Return true; } Else { If (this. blankText. length = 5) This. markInvalid (this. fieldLabel + this. blankText ); Else This. markInvalid (this. blankText ); Return false; } } If (value. length <this. minLength ){ This. markInvalid (String. format (this. minLengthText, this. minLength )); Return false; } If (value. length> this. maxLength ){ This. markInvalid (String. format (this. maxLengthText, this. maxLength )); Return false; } If (this. vtype ){ Var vt = Ext. form. VTypes; If (! Vt [this. vtype] (value, this )){ This. markInvalid (this. vtypeText | vt [this. vtype + 'text']); Return false; } } If (this. regex &&! This. regex. test (value )){ This. markInvalid (this. regexText ); Return false; } Return true; }

It will prompt

Article