Text Box prompts that cannot be empty and corresponding verification error prompts cannot be developed based on extjs

This article mainly solves the following problems:

1. differentiate which text boxes cannot be blank. Many websites use the * sign after the text box, And extjs can also use the lable component to mark them, but this is very troublesome, add a lable component to each text box that cannot be empty. If you use a method to automatically add this * sign to a text box that cannot be empty, in the case of form and other la s, it is also feasible, but if it is a absolute layout, you will find the interface is not so comfortable.

2. Add a text box verification error prompt. If you are using form layout, extjs already comes with a red exclamation mark after the text box. However, many interfaces usually use the absolute layout, at this time, the red exclamation point will not be killed. This article will solve this problem, and verify each text box when you click Save. If there is a verification error, an error message will be prompted and returned.

Error message in form layout provided by extjs:

First, define the style:

.Diy-text{background-image: url(/skin/images/pen.gif) !important;  background-attachment: scroll !important; padding-left: 15px !important;  background-position: 3px 50% !important; background-repeat: no-repeat !important;}

Set the properties of the text box that cannot be blank as follows:

allowBlank:false,cls:"Diy-text"

Of course, if you need to set too many textfields on an interface, you can define the method:

Function setdiytextfield () {Ext. componentmgr. all. each (function (CMP) {var type = CMP. getxtype (); if (type = 'textfield '| type = 'fileuploadfield' | type = 'combo '| type = 'treecombo' | type = 'datefield' | type = 'numberfield '| type = 'textaga' | type = 'timefield' | type = 'trigger ') {If (CMP. allowblank = false) {CMP. CLS = "DIY-text"; CMP. blanktext = "this input item cannot be blank! ";}}});}

You can call setdiytextfield () as follows:

Note: the background-image is used here to forcibly overwrite extjs's own text box style. The difference is very small.

The following code defines the validatevalue method:

Ext.form.TextField.prototype.validateValue = function(value){ var iconid=this.id+"icon";var con=document.getElementById(iconid);     var error = this.getErrors(value)[0];    if (error != undefined) {                this.markInvalid(error);         setValidIcon(con,this);             return false;         }    this.clearInvalid();    return true;}function setValidIcon(con,obj){if(con==null){var x0=0,y0=0;x0=(obj.x+obj.getWidth()-18)||(obj.getWidth()+85);y0=obj.y||0;if(obj.getXType()=="combo"||obj.getXType()=='treecombo'||obj.getXType()=="datefield"||obj.getXType()=="fileuploadfield"){var wid=document.getElementById(obj.id).style.width;wid=wid.substring(0,wid.length-2);x0=Number(wid);y0=0;}var parentNode=document.getElementById(obj.id).parentNode;        var newChild=document.createElement("div");        newChild.setAttribute("name","invalid-icon");        newChild.setAttribute("id",obj.id+"icon");        newChild.setAttribute("class","x-form-invalid-icon");        newChild.setAttribute("className","x-form-invalid-icon");               newChild.setAttribute("style","left:"+x0+"px; top:"+y0+"px; visibility: visible;z-index:10;");        parentNode.appendChild(newChild);        }}

There is also a method to rewrite validatevalue on the Internet. I also borrowed it from it, and I would like to express my gratitude. But that code is directly rewritten in essence: write your own code to determine whether the text box is empty, whether the vtype setting is satisfied, whether the validator function is satisfied, and so on, the verification method of the date control on the date format is missing. Okay, let's find this method in extjs (I'm a bit silly, I did not find it ). Finally, I carefully read the validatevalue method of extjs and call the geterrors () method. That is to say, all error verification is in this method, and we do not need to rewrite this method, A verification prompt is added, so it is changed:

    var error = this.getErrors(value)[0];    if (error != undefined) {                this.markInvalid(error);         setValidIcon(con,this);             return false;         }    this.clearInvalid();    return true;

Setvalidicon (con, this) indicates an error message. The final effect is as follows:

Note: The author sets the red exclamation mark in the text box, so it does not affect the layout effect. After geterrors is used, the effect is perfect. All allowblank, vtype, validator, maxvalue, minvalue, format.

To clear this exclamation point, you can add a purge in validatevalue, for example:

Ext. form. textfield. prototype. validatevalue = function (value) {var iconid = This. ID + "icon"; var con = document. getelementbyid (iconid); var error = This. geterrors (value) [0]; If (error! = Undefined) {This. markinvalid (error); setvalidicon (con, this); Return false;} If (ext. get (iconid) {Ext. get (iconid ). remove (); // clear here} This. clearinvalid (); Return true ;}

Since we contact the clearall () function previously written by the author, when you need to clear a text box and clear the error message, it is impossible to write another Ext. get (iconid ). remove? Therefore, I will rewrite the clearinvalid method:

Ext.form.TextField.prototype.clearInvalid=function(){       if (this.rendered && !this.preventMark) {        this.el.removeClass(this.invalidClass);        var mt = this.getMessageHandler();        if(mt){            mt.clear(this);        }else if(this.msgTarget){            this.el.removeClass(this.invalidClass);            var t = Ext.getDom(this.msgTarget);            if(t){                t.innerHTML = '';                t.style.display = 'none';            }        }        var iconid=this.id+"icon";        if(Ext.get(iconid)){        Ext.get(iconid).remove();        }           }      this.unsetActiveError();}

This completely solves the prompts we need, and adds a function to determine which text boxes are incorrect when saving them.

Function checkvtype () {var Re = true; Ext. componentmgr. all. each (function (CMP) {var type = CMP. getxtype (); if (type = 'textfield '| type = 'combo' | type = 'treecombo '| type = 'datefield' | type = 'numberfield' | type = 'textea '| type = 'timefield' | type = 'trigger ') {If (CMP. isvisible () {var Va = CMP. isvalid (); Re = va? Re: VA ;}}); If (RE = false) Ext. messageBox. show ({Title: 'error', MSG: "The information you entered is incorrect. Check the information before performing this operation! <Br/> <span style = 'color: Brown; '> cause: </span> <span style = 'color: red; '> the format is incorrect or the input value is null. </Span> ", buttons: Ext. MessageBox. OK, icon: Ext. MessageBox. Error}); Return re ;}

Checkvtype () returns true, which indicates that verification is correct, false is returned, and verification error is returned.

 

Author:Kunoy Source:Http://blog.csdn.net/kunoy Statement:The authors write blogs to sum up experience and exchange learning.
If you need to reprint the statement, please keep it as much as possible and provide the original article connection clearly on the article page. Thank you!