Extjs4学习笔记-Ext.util.TaskRunner

最新推荐文章于 2016-03-24 10:27:00 发布

愤怒的根号三

最新推荐文章于 2016-03-24 10:27:00 发布

阅读量210

点赞数

分类专栏： ExtJS 文章标签： javascript xhtml ViewUI

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.TaskRunner</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">
			#div1 {
				width: 160px;
				height: 160px;
				line-height: 80px;
				padding: 0;
				font-size: 80px;
				text-align: center;
				font-weight: bold;
				display: none;
			}
		</style>
		
		<script type="text/javascript">
			
			Ext.onReady(function() {
				
				var input = Ext.getDom("input1");
				var div = Ext.getDom("div1");
				var button = Ext.getDom("stopButton");
				
				var task = {
					run: function(count) {
						var v = parseInt(input.value);
						var d = v - count;
						if(v > count) {
							div.innerHTML = v - count;
						} else {
							input.removeAttribute("readonly");
							div.style.display = "none";
							button.value = "开始";
							Ext.MessageBox.alert("信息", "时间到!");
						}
					},
					interval: 1000,
					duration: 1000
				}
				
				//为文本框绑定keypress事件，禁止输入非数字字符
				Ext.EventManager.on("input1", "keypress", function(e, el) {
					var key = e.getKey();
					if(key < e.ZERO || key > e.NINE) {
						e.stopEvent();
					}
				});
				
				
				//为按钮绑定单击事件
				Ext.EventManager.on("stopButton", "click", function(e, el) {
					var t = task;
					if(el.value == "停止") {
						el.value = "开始";
						input.removeAttribute("readonly");
						div.style.display = "none";
						Ext.TaskManager.stop(task);
					} else {
						var v = parseInt(input.value);
						if(v > 0) {
							t.duration = v * 1000;
							input.readOnly = "true";
							div.innerHTML = v;
							div.style.display = "block";
							el.value = "停止";
							Ext.TaskManager.start(task);
						}
					}
				});
				
				//封装好的单击事件：Ext.util.ClickRepeater
				// Ext.create("Ext.util.ClickRepeater", "stopButton", {
					// pressedCls: 'pressed',
					// listeners: {
						// click: function(e) {
							// var el = button;
							// var t = task;
							// if(el.value == "停止") {
								// el.value = "开始";
								// input.removeAttribute("readonly");
								// div.style.display = "none";
								// Ext.TaskManager.stop(task);
							// } else {
								// var v = parseInt(input.value);
								// if(v > 0) {
									// t.duration = v * 1000;
									// input.readOnly = "true";
									// div.innerHTML = v;
									// div.style.display = "block";
									// el.value = "停止";
									// Ext.TaskManager.start(task);
								// }
							// }
						// }
					// }
				// });
				
			});
			
		</script>
		
	</head>
	<body>
		<div style="padding: 20px 0 0 20px;">
			<input id="input1" type="text" value="10" />
			<input id="stopButton" type="button" value="开始" />
			<div id="div1"></div>
		</div>
	</body>
</html>