现在的位置: 首页 > 综合 > 正文

Extjs vtype使用

2012年08月21日 ⁄ 综合 ⁄ 共 1094字 ⁄ 字号 评论关闭
 Ext.apply(Ext.form.VTypes, {   
        dateRange: function(val, field){   
            if(field.dateRange){   
                var beginId = field.dateRange.begin;   
                this.beginField = Ext.getCmp(beginId);   
                var endId = field.dateRange.end;   
                this.endField = Ext.getCmp(endId);   
                var beginDate = this.beginField.getValue();   
                var endDate = this.endField.getValue();   
            }   
            if(beginDate <= endDate){   
                return true;   
            }else{   
                return false;   
            }   
        },   
        //验证失败信息   
        dateRangeText: '开始日期不能大于结束日期'  
    });   

拿来主义,贴过来一段vtyp的文字说明

ExtJS中使用vtype

ExtJSvtype相当于一个预定义的客户端数据校验,每一种vtype都对应某一种特定的数据校验,比如说EmailIP地址,手机号等等。为了能够正确的使用它,需要注意以下四个方面:

  1. onReady方法中,必须调用Ext.QuickTips.init();方法,我是花了九牛二虎之力才发现这个的。因为我是从别的地方直接拷贝了一个FormPanel的定义,结果没有这个调用,因此校验错误的提示就TMD显示不出来。最后一步一步的检查在发现需要这个方法来初始化Ext中所有类似hint的显示功能。
  2. 还需要调用Ext.form.Field.prototype.msgTarget = 'side';方法,这个方法的作用是在需要校验的字段右边显示一个小叹号。
  3. 在需要校验的字段中用vtype设定相应的校验类型,如:emailurlalphamun等等,ExtJs本身仅仅定义了不多的几个。我们可以自定义,这就好像是struts2中自定义validation一样。
  4. 如果不定义vtypeText,那么在字段校验出错时,将会显示默认的错误信息,我们可以通过设置vtypeText来改变这一默认情况。

对于自定义vtype来说是通过以下方式来实现的:

Ext.apply(Ext.form.VTypes,{

xyz1 : function() {},

xyz2 : function() {}

});

其中xyz1xyz2就是vtype的名字,方法是fuction(val,
field);
其中val代表了当前字段的值,而field表示的是当前字段的一个引用,通过这个引用可以访问在当前字段上定义的其他属性;
 

抱歉!评论已关闭.