`
PrisonBreak
  • 浏览: 95917 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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.0学习笔记

    Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经...ExtJS4学习笔记(十)---ExtJS4图片验证码的实现

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...

    extJs 2.1学习笔记

    目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)--...

    ExtJS笔记----FormPanel的使用

    NULL 博文链接:https://lucky16.iteye.com/blog/1490278

    ExtJS快速入门--传智播客--蔡世友

    ExtJS快速入门--传智播客--蔡世友

    Extjs4---combobox省市区三级联动+struts2

    在这个特定的项目“Extjs4---combobox省市区三级联动+struts2”中,我们将探讨如何利用ExtJS 4的ComboBox组件实现省市区的三级联动效果,并结合Struts2框架进行数据交互。 首先,`ComboBox`是ExtJS中的一个组件,它...

    extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip

    在"extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip"这个压缩包中,包含了一个基于ExtJS 4.1.0 MVC模式构建的复杂仪表盘示例。这个示例展示了如何利用ExtJS的MVC设计模式来组织和管理代码,以便创建功能...

    extjs学习笔记-开发者必备

    对爱好extjs的开发者有帮助,提供中文api文档,及常用的方法!

    extjs2----关于extjs 的使用,操作

    4. **数据绑定**:阐述ExtJS的数据模型(Store)和数据显示组件(Grid、Tree)之间的数据绑定机制,包括XML、JSON数据源的加载。 5. **表单元素**:深入探讨表单(Form)的创建,包括各种表单字段(TextField、...

    EXTJS开发包ext-3.2.0

    EXTJS开发包ext-3.2.0 EXTJS开发包ext-3.2.0

    extjs4 学习笔记源码

    exjts4 学习笔记源码,源码包含windws,hbox,vbox和Grid的应用,其中grid介绍比较多。下载解压后,部署后就可以使用,所有代码均在demo文件夹下。更多extjs4教程,请关注http://www.mhzg.net

    Extjs 5 学习笔记

    ### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...

    EXTJS4.1计算器插件

    由于开发WEB需要一个WEB计算器插件,在网上找EXTJS4计算器插件没有一个,找extjs4.0计算器找到一个,但由于代码太多,在主界面上写太多代码,自我感觉以后看起来吃力,思路一下子不好摸到。因此写了这个插件,分享给...

    extjs4---job10和job11

    测试EXTJS4中的特性:config, extend, statics, mixins。 测试EXTJS自定义事件:当恐怖分子(Terrorist)在火车站掏刀时,触发一个砍人事件。警察将抓捕他。 群众(Person)看到砍人吓坏了。

Global site tag (gtag.js) - Google Analytics