Extjs4学习笔记-Ext.util.KeyMap

PrisonBreak

浏览: 96332 次
性别:
来自: 北京

最近访客更多访客>>

zzy7075

littlerare

yongmeixin

Eventhought

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

KeyMap

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ext.util.KeyMap</title>
		
		<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
		<script type="text/javascript" src="../extjs/bootstrap.js"></script>
		<script type="text/javascript" src="../extjs/ext-lang-zh_CN.js"></script>
		
		<style type="text/css">
			#form1 span {
				width: 300px;
				height: 30px;
				display: block;
			}
		</style>
		
		<script type="text/javascript">
			
			/**
			 * 功能描述：页面中有一个表单，当用户在文本框、复选框等控件上按下回车键的时候，焦点将跳到下一个输入框。
			 * 
			 * 实现代码：要实现回车后将焦点切换到下一个输入框的功能，一般的思路是将每一个输入框定义一个keypress方法，
			 * 然后判断输入键盘代码是否为回车，如果是，跳到下一个输入框。不过，在输入框比较多的情况下，这样做是比较累人的。
			 * 如果利用时间的传播机制，只在表单标记上定义一个事件就可以了。
			 * 
			 * 本示例将会使用KeyMap将回车键绑定到表单标记上。
			 */
			//建立一个元素数组
			Ext.onReady(function() {
				
				var els = Ext.query("#form1 input, textarea");
			
				Ext.create("Ext.util.KeyMap", "form1", {
					key: 13,
					fn: function(key, e) {
						var el = e.target, target = els, ln = target.length;
						
						for (var i=0; i < ln; i++) {
						  if(target[i] == el) {
						  	if(i+1 == ln) {
						  		//如果是最后一个输入框，使第一个输入框获得焦点
						  		target[0].focus();
						  	} else {
						  		//如果不是最后一个，下一个输入框获得焦点
						  		target[i+1].focus();
						  	}
						  }
						};
					}
					// scope: Ext.getDom("form1")
				});
			});
			
		</script>
		
	</head>
	<body>
		<div style="margin: 20px 0 0 20px">
			<form id="form1">
				<span>姓名：<input name="name" type="text" value="" /></span>
				<span>性别：<input type="radio" name="sex" value="男" />男&nbsp;&nbsp;&nbsp;
					<input name="sex" type="radio" value="女" />女</span>
				<span>电子邮件：<input type="text" name="email" value="" /></span>
				<span>个人简介：<textarea name="intro"></textarea></span>
			</form>
		</div>
	</body>
</html>

分享到：

(转载)Eclipse环境下配置spket中ExtJS提 ... | Extjs4学习笔记-Ext.util.TaskRunner

2013-08-01 19:57
浏览 1503
评论(0)
分类:编程语言
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Extjs4学习笔记-Ext.util.KeyMap

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Extjs4学习笔记-Ext.util.KeyMap

评论

发表评论

相关推荐

Extjs4学习笔记-为树节点添加自定义字段

Extjs4学习笔记-选择器Ext.DomQuery

Extjs4学习笔记-Ext.util.KeyNav

(转载)Eclipse环境下配置spket中ExtJS提示

Extjs4学习笔记-Ext.util.TaskRunner

Extjs4学习笔记-Ext.util.DelayedTask

Extjs4学习笔记-常用函数(更新中...)

Extjs4学习笔记-Ext.EventManager

Extjs4学习笔记-计算器

ExtJS调试--数据加载问题

ExtJS调试--显示问题调试

Extjs4 新特性介绍

Extjs4 MVC

Extjs4学习笔记-ExtJS 4 图片验证码的实现(部分摘自《Extjs4.0学习指南（中文）》)

ExtJS 4 推荐目录结构（MVC）

最近访客更多访客>>