Extjs4学习笔记-Ext.util.KeyMap

最新推荐文章于 2016-11-15 23:26:24 发布

愤怒的根号三

最新推荐文章于 2016-11-15 23:26:24 发布

阅读量330

点赞数

分类专栏： ExtJS 文章标签： KeyMap

ExtJS 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!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>