浏览 2542 次
锁定老帖子 主题:Ext 验证码刷新问题
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-06-22
最后修改:2009-06-22
虽然可能是一些小问题,但是如果不能及时解决的话,就会影响显示效果,甚至项目 进度。 验证码对于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 : " <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> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |