Extjs4学习笔记-计算器

主要练习addBehaviors()函数使用:

<!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>计算器</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">
			table {
				margin: 20px 0 0 20px;
				font-size: 20px;
				line-height: 40px;
				border: 1px solid #000;
				padding: 3px;
			}
			
			th {
				text-align: center;
			}
			
			#Calculator {
				border: 1px solid #000;
			}
			
			#result {
				width: 156px;
				height: 30px;
				font-size: 16px;
				font-weight: bold;
			}
			
			.cal, .number, .op, .sign {
				width: 40px;
				height: 40px;
				text-align: center;
			}
			
			.cmd {
				width: 80px;
				height: 40px;
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
		Ext.onReady(function() {
			var cal = function() {
				switch(op) {
					case "-" :
						first = parseFloat(first) - parseFloat(second);
						break;
					case "*" :
						first = parseFloat(first) * parseFloat(second);
						break;
					case "/" :
						second = parseFloat(second);
						if(second != 0) {
							first = parseFloat(first) - parseFloat(second);
						}
						break;
					default:
						first = parseFloat(first) + parseFloat(second);
						break;
				}
				op = "";
				if(arguments.length > 0) {
					op = arguments[0];
				}
				second = "";
				result.value = first;
			}
			
			var first = "";	//用来保存第一个数字
			var second = "";	//用来保存第二个数字
			var op = "";	//用来保存运算符
			var result = Ext.getDom("result");	//指向结果文本框的DOM对象
			
			Ext.addBehaviors({
				
				"input.number@click" : function(e, el) {
					if(Ext.isEmpty(op)) {
						if(!(el.value == 0 && first == 0)) {
							first = first + el.value;
							result.value = first;
						}
					} else {
						if(!(el.value == 0 && second == 0)) {
							second = second + el.value;
							result.value = second;
						}
					}
				},
				
				"input.cmd@click" : function(e, el) {
					if(el.value == "C") {
						if(Ext.isEmpty(op)) {
							first = "";
						} else {
							second = "";
						}
						result.value = "0";
					} else {
						cal();
					}
				},
				
				"input.sign@click" : function(e, el) {
					if(el.value == ".") {
						if(Ext.isEmpty(op)) {
							if(first.toString().indexOf(".") == -1) {
								first += ".";
								result.value = first;
							}
						} else {
							if(second.toString().indexOf(".") == -1) {
								second += ".";
								result.value = second;
							}
						}
					} else {
						if(Ext.isEmpty(op)) {
							first *= -1;
							result.value = first;
						} else {
							second *= -1;
							result.value = sceond;
						}
					}
				},
				
				"input.op@click" : function(e, el) {
					if(Ext.isEmpty(op) || Ext.isEmpty(second)) {
						op = el.value;
						result.value = "0";
					} else {
						cal(el.value);
					}
				}
				
			});
		});
		</script>
		
	</head>
	<body>
		<table cellpadding="1" cellspacing="1" border="0">
			<tr style="border: 1px solid #000; background: #2159c2; color: #fff">
				<th colspan="4">计算器</th>
			</tr>
			
			<tr>
				<td colspan="4" align="center"><input id="result" readonly=true style="text-align: right" type="text" value="0" /></td>
			</tr>
			
			<tr>
				<td colspan="2"><input class="cmd" type="button" value="=" /></td>
				<td colspan="2"><input class="cmd" type="button" value="C" /></td>
			</tr>
			
			<tr>
				<td><input class="number" type="button" value="7" /></td>
				<td><input class="number" type="button" value="8" /></td>
				<td><input class="number" type="button" value="9" /></td>
				<td><input class="op" type="button" value="+" /></td>
			</tr>
			
			<tr>
				<td><input class="number" type="button" value="4" /></td>
				<td><input class="number" type="button" value="5" /></td>
				<td><input class="number" type="button" value="6" /></td>
				<td><input class="op" type="button" value="-" /></td>
			</tr>
			
			<tr>
				<td><input class="number" type="button" value="1" /></td>
				<td><input class="number" type="button" value="2" /></td>
				<td><input class="number" type="button" value="3" /></td>
				<td><input class="op" type="button" value="*" /></td>
			</tr>
			
			<tr>
				<td><input class="sign" type="button" value="-/+" /></td>
				<td><input class="number" type="button" value="0" /></td>
				<td><input class="sign" type="button" value="." /></td>
				<td><input class="op" type="button" value="/"/ /></td>
			</tr>
		</table>
	</body>
</html>

 

你可能感兴趣的:(extjs4)