Ext 验证码刷新问题

jacky68147527

浏览: 211633 次
性别:
来自: 深圳

最近访客更多访客>>

xvhin

riverdh

p369000

lanxuelong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

EXT JSP Ajax Web 算法

    最近一个电力项目是用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版) | 邮件发送小程序（JAVA版）

2009-06-22 19:03
浏览 1876
评论(0)
论坛回复 / 浏览 (0 / 2546)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论