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

效果图：