`
jacky68147527
  • 浏览: 207020 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ext 验证码刷新问题

    博客分类：
  • Ajax
EXTJSPAjaxWeb算法 
阅读更多
    最近一个电力项目是用Ext来做，其中遇到一些比较常见的问题。

     虽然可能是一些小问题，但是如果不能及时解决的话，就会影响显示效果，甚至项目

     进度。

     验证码对于WEB项目来说是最熟悉不过的了，在传统的WEB项目开发中，很容易解决

     验证码的问题。但是在Ext中可能就不会那么轻松地搞定，至少不会像在传统的WEB

    项目开发中那么应用自如。

     其中，最明显的两点问题就是Ext中验证码的img标签布局，以及点击图片重新获取

     验证码（这里不谈验证码的生成原理以及算法）

     在Ext中，注册和登录基本上都会要求有验证码的验证。

     而在表单提交中，最常用的布局就是form布局。现在问题出现了，form布局的话

     在同一行只允许摆放一个Ext组件。现在我们需要将验证码的输入框和验证图片放

     在同一行。怎么办呢？

     后来仔细一想，既然form布局一行只允许摆放一个Ext组件

    那我们就只摆放一个Ext组件，但是我们可以在这个组件中添加其他的组件。

    思路有了，就是将验证码输入框（Ext.form.TextFile）和验证码图片放到同一个

    Panel中去，再设置该Panel的布局为column布局就OK了。

    另一个问题就是点击图片（或者一个链接）重新获取验证码。这里我们也不谈什么Ajax

   技术。首页上有登陆，注册等链接。当点击登陆链接时，弹出一个Window来用于客户

   登录，当然这里你就不能用reload的方法来重新获取验证码图片了，因为你一reload

  你的Window也没了。比如用最传统的那种验证码图片显示 <img src='.....' />

  不知各位有没有碰到过，就是当你点击的时候，图片根本就没有跟新。

   我的思路就是让他刷新，但是不是本页刷新，而是通过iframe引入另外一个页面。让内页

   进行刷新。 
var valCodePanel = new Ext.Panel({
	    		layout : 'column',
	    		width : 300,
			plain : true,
			items : [{
			   columnWidth : .75,
			   layout : 'form',			   
			   defaultType : 'textfield',
			   items : [{
			    fieldLabel : '验证码',
			    labelWidth : 100,
			    width : 120,
			    labelAlign : 'right',
			    //emptyText : '验证码不能为空!', 
			    style : 'width:50px',
			    name : 'randCode',
			    id : 'usercode',
			    allowBlank : false,
			    maxLength : 4,
			    blankText : '验证码不能为空'
			   }]
			  }, {
			   columnWidth : .25,
			   layout : 'form',
			   items : [{
			    html : "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<iframe src='<%=path %>/imageIframe.jsp' width='100%' height='20px;' frameborder='0' scrolling='auto'></iframe>"
			   }]
			}]	    		
	    	});


imageIframe.jsp 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'imageIframe.jsp' starting page</title>
	<script type="text/javascript">
		function change(){
			document.location.reload();
		}
	</script>
	<style type="text/css">
		a{text-decoration:none;}
		a:visited{text-decoration:none;}
		a:active{text-decoration:none;}
		a:link{text-decoration:none;}
		a:hover{text-decoration:none;}

	</style>
  </head>
  
  <body style="margin:0px;">
    <div id='img-div'><a href="javascript: change();" title="点击重新获取图片"><img src='<%=path %>/image.jsp' style='border : none;'/></a></div>
  </body>
</html>
分享到：
| 邮件发送小程序（JAVA版）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics