Extjs学习总结之17悬浮效果与校验

悬浮效果就是说你鼠标长时间停留在某个组件上的一种效果。

校验就是对一些文本框等组件中内容格式的校验。

 

先看悬浮效果吧：

qtip.js

Ext.onReady(function(){//启动悬停提示Ext.QuickTips.init();/* * Button支持两种类型的悬停提示，qtip和title，默认是前者，通过tooltipType选项进行配置， * 而提示信息保存在tooltip选项中 */var btn = new Ext.Button({text:"悬停演示",renderTo:"a",tooltip:"这是一个悬停演示的按钮",tooltipType:"qtip"});/* * register方法类似一个static方法，该方法为指定的标记注册悬停提示。 * 默认情况下，提示框最小宽度为40，最大宽度为300 */Ext.QuickTips.register({text:"请输入您的姓名，年龄，是否单身等信息！",target:"ta",title:"输入"});});

 

效果图：

 

接着是校验特效：

validate.js:

Ext.onReady(function(){ //非空校验 var txtName = new Ext.form.TextField({  name:"txtName",  fieldLabel:"姓名",  width:200,  allowBlank:false,  regex:/^\w{6,}$/, //至少六个字符  invalidClass:"myvalid",  invalidText:"温馨提示：通过验证，结果为无效数据",  focusClass:"myfocus",  validationEvent:false,  validateOnBlur:false,  validationDelay:2000 });  //长度校验 var txtPassword = new Ext.form.TextField({  name:"txtPassword",  fieldLabel:"密码",  inputType:"password",  minLength:6,  maxLength:10,  minLengthText:"温馨提示：最小长度为6个字符",  maxLengthText:"温馨提示，最大长度只能为10个字符",  width:200 });  //vtype验证 //vtype验证是一种预先定义好的验证，可用于验证邮箱，网址和字符，下划线等。。。 var alpha = /^[a-zA-Z_]+$/; //字母和下划线 var alphanum = /^[a-zA-Z0-9_]+$/; //字母数字下划线 var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/; var txtUrl = new Ext.form.TextField({  name:"txtUrl",  fieldLabel:"个人喜欢的网站",  vtype:"url",  width:500 });   /*********************提交按钮***********************/  var btnSubmit = new Ext.Button({  text:"提交",  handler:function(){   f.getForm().submit({    success:function(form,action){     form.items.each(function(field){      if(field.isFormField){       alert(field.getName()+" = "+field.getValue());      }     });    },    failure:function(){     Ext.MessageBox.alert("","对不起,表单提交失败");    }   });  } });  /*********************重置按钮***********************/  var btnReset = new Ext.Button({  text:"重置",  handler:function(){   f.getForm().reset();  } });  var f = new Ext.form.FormPanel({  url:"../../../componentServlet",  method:"post",  renderTo:"a", //<div id="a"></div>  title:"新增员工",  style:"padding:10px",  frame:true,  labelAlign:"right",  width:650,  autoHeight:true,    //把组件依次的放置在面板上  items:[   txtName,   txtPassword,   txtUrl  ],  buttons:[btnSubmit,btnReset] }); });

效果图：