最近一个电力项目是用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 : " <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>
分享到:
相关推荐
在用户点击获取验证码按钮后,Ext3.0会向服务器发送请求,服务器则返回一张新的验证码图片和其对应的验证码值。 服务器端,这里使用的是Apache Tomcat,这是一个流行的Java Servlet容器,可以处理HTTP请求并生成...
本篇文章将聚焦于如何使用Ext JavaScript库来实现一个简单的验证码功能。Ext是一个强大的前端开发框架,提供了丰富的UI组件和数据绑定机制,适用于构建复杂的Web应用。 首先,我们需要了解Ext的基本结构。ExtJS基于...
文件名"ext4_example_form"可能包含了一个示例代码,展示如何在ExtJS4中创建一个包含登录和验证码功能的表单。这个文件可能包括了JavaScript代码,展示了如何创建表单组件、绑定事件监听器以及如何发送Ajax请求到...
4. **Ajax交互**:当用户点击登录按钮时,EXTJS4通常会使用Ajax技术异步提交表单,这样不会刷新整个页面,提升了用户体验。 5. **服务器端验证**:`login.jsp`处理这些Ajax请求,验证用户名和密码的正确性。这通常...
- **跨域问题**:如果EXT所在的域名与后端服务器的域名不一致,则需要处理跨域问题。可以采用CORS机制或JSONP方式解决。 - **安全性考虑**:对于敏感操作如修改密码等,应当增加额外的安全验证措施,例如验证码、双...
在上传图片的场景中,EXT的FileField组件可以用于选择本地文件,FormPanel可以封装整个上传表单,而Ajax提交方式可以实现异步上传,无需页面刷新。 3. **上传图片的流程**: - 用户在EXT前端选择图片文件,EXT的...
综上所述,"ext s2sh整合实例 增删改查"是一个综合性的Web开发项目,展示了如何利用EXTJS构建交互式前端,通过Struts2处理请求,Spring管理依赖,Hibernate处理数据库操作,以及MD5和验证码增强安全性,最后利用Ajax...
5. **动态生成验证码图片**:在登录界面中,通过JavaScript动态插入验证码图片,确保每次刷新界面时,验证码都会更新,增强安全性。 #### 详细步骤与代码分析 1. **创建登录窗口实例**:在`onReady`事件处理器中,...
Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下与服务器交换数据并局部更新页面,提高了交互性。EXT是一个流行的JavaScript框架,它提供了丰富的组件库,简化了前端开发。在这个场景...
支持验证码的短信和邮件发送一键式切换。9.HTML页面真静态化技术,页面刷新快。10.具有独立的投票、点赞、访问统计、结构树状图模块,全面的日志系统,低耦合设计。绑定到不同的对象即能完成相应的功能。11. 具有...
- 拖动url——创建ext app - 文件管理,树目录变化后(增删改)自动同步到文件列表 - 文件管理,文件列表变化后(增删改)自动同步到树目录 - 中文用户名限制 - 对话框打开关闭动画 - 其他多处优化 ####fix ...
6. **计时器与倒计时**:可以创建定时执行的任务,如倒计时,用于活动预告或者验证码过期提醒。 7. **表单验证**:JavaScript可以实时验证用户输入,如邮箱格式、电话号码格式,确保数据的准确性和安全性。 8. **...
9.HTML页面真静态化技术,页面刷新快。10.具有独立的投票、点赞、访问统计、结构树状图模块,全面的日志系统,低耦合设计。绑定到不同的对象即能完成相应的功能。11. 具有专辑功能,可以实现站中站、博客、个人主页...