主要练习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学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经...ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
语言程序设计资料：ExtJs学习笔记-2积分.doc
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...
目录 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-oaextjs-OA extjs-oa
ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)--...
NULL 博文链接：https://lucky16.iteye.com/blog/1490278
ExtJS快速入门--传智播客--蔡世友
在这个特定的项目“Extjs4---combobox省市区三级联动+struts2”中，我们将探讨如何利用ExtJS 4的ComboBox组件实现省市区的三级联动效果，并结合Struts2框架进行数据交互。 首先，`ComboBox`是ExtJS中的一个组件，它...
在"extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip"这个压缩包中，包含了一个基于ExtJS 4.1.0 MVC模式构建的复杂仪表盘示例。这个示例展示了如何利用ExtJS的MVC设计模式来组织和管理代码，以便创建功能...
对爱好extjs的开发者有帮助，提供中文api文档，及常用的方法！
4. **数据绑定**：阐述ExtJS的数据模型（Store）和数据显示组件（Grid、Tree）之间的数据绑定机制，包括XML、JSON数据源的加载。 5. **表单元素**：深入探讨表单（Form）的创建，包括各种表单字段（TextField、...
EXTJS开发包ext-3.2.0 EXTJS开发包ext-3.2.0
exjts4 学习笔记源码，源码包含windws，hbox,vbox和Grid的应用，其中grid介绍比较多。下载解压后，部署后就可以使用，所有代码均在demo文件夹下。更多extjs4教程，请关注http://www.mhzg.net
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具，它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
由于开发WEB需要一个WEB计算器插件，在网上找EXTJS4计算器插件没有一个，找extjs4.0计算器找到一个，但由于代码太多，在主界面上写太多代码，自我感觉以后看起来吃力，思路一下子不好摸到。因此写了这个插件，分享给...
测试EXTJS4中的特性：config, extend, statics, mixins。 测试EXTJS自定义事件：当恐怖分子（Terrorist）在火车站掏刀时，触发一个砍人事件。警察将抓捕他。 群众（Person）看到砍人吓坏了。