It's not who you are underneath, it's what you do that defines you

目录视图摘要视图订阅 基于Extjs开发不允许为空的文本框提示及相应的验证错误提示(转)

原文地址:http://blog.csdn.net/kunoy/article/details/8007585

本文主要解决问题:

       1、区分哪些文本框不允许为空,很多网站都采用在文本框后加*号,extjs也可以用lable组件标识,但这样做很麻烦,每一个不允许为空的文本框都需要多加一个lable组件,如果用一个方法自动为不允许为空的文本框加上这个*号,在form等布局的情况下,也是可行的,但如果是absolute布局,你会发现界面就不那么舒畅了。

       2、添加文本框验证错误提示,如果你采用的是form布局,extjs已经自带了在文本框后加一个红色感叹号的提示,但往往很多界面采用的是absolute布局,这时红色感叹号就打死也不会出现了,本文就解决这一问题,并且在点击保存时统一验证每一个文本框,如果存在验证错误,提示错误信息并返回。

 extjs自带的在form布局下的错误提示:

首先定义样式:

[css] view plaincopy
 

.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;
}

        设置不允许为空的文本框属性如下:

[javascript] view plaincopy
 allowBlank:false,  
cls:"Diy-text"  

         当然如果一个界面需要设置的textField太多,可定义方法:

[javascript] view plaincopy
 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=='textarea'||Type=='timefield'||Type=='trigger'){                  

if(cmp.allowBlank==false){  

                   cmp.cls="Diy-text";  

                   cmp.blankText="该输入项不能为空!";  

                         }               

        }                                     

    });  

}  

        初始化调用setDiyTextField()即可,效果如下:


        说明:这里使用background-image,强制覆盖了extjs自己的文本框样式,不仔细看,其实差别很小。

        下面该定义validateValue方法了,代码如下:

[javascript] view plaincopy
 

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);  

  1.          setValidIcon(con,this);      
  2. return false;       
  3.     }  
  4. this.clearInvalid();  
  5. return true;  
  6. }  
  7. function setValidIcon(con,obj){  
  8. if(con==null){  
  9. var x0=0,y0=0;  
  10.         x0=(obj.x+obj.getWidth()-18)||(obj.getWidth()+85);  
  11.         y0=obj.y||0;  
  12. if(obj.getXType()=="combo"||obj.getXType()=='treecombo'||obj.getXType()=="datefield"||obj.getXType()=="fileuploadfield"){  
  13. var wid=document.getElementById(obj.id).style.width;  
  14.             wid=wid.substring(0,wid.length-2);  
  15.             x0=Number(wid);  
  16.             y0=0;  
  17.         }  
  18. var parentNode=document.getElementById(obj.id).parentNode;  
  19. var newChild=document.createElement("div");  
  20.         newChild.setAttribute("name","invalid-icon");  
  21.         newChild.setAttribute("id",obj.id+"icon");  
  22.         newChild.setAttribute("class","x-form-invalid-icon");  
  23.         newChild.setAttribute("className","x-form-invalid-icon");         
  24.         newChild.setAttribute("style","left:"+x0+"px; top:"+y0+"px; visibility: visible;z-index:10;");  
  25.         parentNode.appendChild(newChild);  
  26.             }     
  27. }  

       网上也有一段重写validateValue的方法,笔者也是从那里借鉴过来的,表示感谢,但那段代码直接从本质上重写了:自己写代码判断文本框是否为空,是否满足Vtype设置,是否满足validator函数等,其中就漏掉了日期控件对日期格式的验证方法,好吧,我们就去extjs里面找这段方法吧(笔者有点傻,还真去找了,可惜没找到)。最后仔细看了extjs的validateValue方法,都调用了getErrors()方法,也就是说所有错误验证都在这个方法里面,而我们并不需要改写这个方法,只是增加一个验证提示,故修改为:

[javascript] view plaincopy
 
  1. var error = this.getErrors(value)[0];  
  2. if (error != undefined) {             
  3.      this.markInvalid(error);  
  4.      setValidIcon(con,this);      
  5.      return false;       
  6. }  
  7. this.clearInvalid();  
  8. return true;  

       其中setValidIcon(con,this)就是增加错误提示。最后效果如下:

      说明:笔者将红色感叹号设置在文本框范围内,从而不影响布局效果,使用getErrors之后,效果真完美,所有allowBlank,vtype,validator,maxValue,minValue,format等该验证的都验证了。

     下面就解决如果清除这个感叹号提示,一种方法是在validateValue里增加清除,比如:

[javascript] view plaincopy
 
  1. Ext.form.TextField.prototype.validateValue = function(value){   
  2.     var iconid=this.id+"icon";  
  3.     var con=document.getElementById(iconid);      
  4.     var error = this.getErrors(value)[0];  
  5.     if (error != undefined) {             
  6.          this.markInvalid(error);  
  7.          setValidIcon(con,this);      
  8.          return false;       
  9.     }  
  10.     if(Ext.get(iconid)){  
  11.         Ext.get(iconid).remove();//在这里清除  
  12.     }     
  13.     this.clearInvalid();  
  14.     return true;  
  15. }  

     由于联系到笔者之前写的clearAll()函数,即当你需要清空一个文本框,并且清除错误提示,不可能还另外多写一句Ext.get(iconid).remove()吧?故笔者再重写clearInvalid方法:

[javascript] view plaincopy
 
  1. Ext.form.TextField.prototype.clearInvalid=function(){     
  2.     if (this.rendered && !this.preventMark) {  
  3.         this.el.removeClass(this.invalidClass);  
  4.         var mt = this.getMessageHandler();  
  5.         if(mt){  
  6.             mt.clear(this);  
  7.         }else if(this.msgTarget){  
  8.             this.el.removeClass(this.invalidClass);  
  9.             var t = Ext.getDom(this.msgTarget);  
  10.             if(t){  
  11.                 t.innerHTML = '';  
  12.                 t.style.display = 'none';  
  13.             }  
  14.         }  
  15.         var iconid=this.id+"icon";  
  16.         if(Ext.get(iconid)){  
  17.             Ext.get(iconid).remove();  
  18.         }         
  19.     }    
  20.     this.unsetActiveError();  
  21. }  

      到此完整解决了我们需要的提示,最后添加一个函数,当保存时判断哪些文本框是验证错误的。

[javascript] view plaincopy
 
  1. function checkVtype(){  
  2.     var re=true;      
  3.     Ext.ComponentMgr.all.each(function(cmp){  
  4.         var Type=cmp.getXType();  
  5.         if(Type=='textfield'||Type=='combo'||Type=='treecombo'||Type=='datefield'||Type=='numberfield'||Type=='textarea'||Type=='timefield'||Type=='trigger'){                   
  6.             if(cmp.isVisible()){  
  7.                var va=cmp.isValid();                 
  8.                re=va?re:va;   
  9.             }  
  10.          }                                    
  11.     });  
  12.     if(re==false)  
  13.         Ext.MessageBox.show({title: '错误',msg: "您输入的信息验证错误,请核对后再执行该操作!<br/><span style='color:brown;'>错误原因:</span><span style='color:red;'>格式不正确或输入值为空。</span>",buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});  
  14.     return re;  
  15. }  

     checkVtype()返回true,验证正确,返回false,验证错误。

 

 

原文地址:http://blog.csdn.net/kunoy/article/details/8007585

posted @ 2015-12-28 00:05  金铭杰  阅读(213)  评论(0编辑  收藏  举报

Brick walls are there for a reason :they let us prove how badly we want things