主要练习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)看到砍人吓坏了。