以下是本人原创，如若转载和使用请注明转载地址。本博客信息切勿用于商业，可以个人使用，若喜欢我的博客，请关注我，谢谢！少帅的博客
使用Ext实现简单计算器，网页版实现
1、页面部分calculator.jsp

 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>基于ExtJS的计算器</title>
    
    <link rel="stylesheet" type="text/css" href="<%=basePath%>js/resources/css/ext-all.css">
    <script type="text/javascript" src="<%=basePath%>js/ext-debug.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/ext-all-debug.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jquery-1.9.0.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    //$("#block").hide();
        $("#btn").click(function(){
            $("#block").toggle();
        });
    });
    Ext.onReady( function () {
    
        Ext.create("Ext.Button", {
            renderTo: Ext.get("btn"),
            text: "计算器",
            allowDepress: true,     //是否允许按钮被按下的状态
            enableToggle: true,     //是否允许按钮在弹起和按下两种状态中切换
            id: "bt1"
        });
      
         new Ext.dd.DDProxy('block');//定义面板可以任意拖动
             //Ext.Msg.alert('提示', '执行方法 Ext.onReady()');//测试ext能否使用
             var  calPanel =  new  Ext.panel.Panel({ //定义面板
                title: '计算器' , //标题
                renderTo:'block', //将显示指向页面的body
                bodyPadding:5, //设置间隔
                width:270, //面板宽度
                closable:true,//定义面板的关闭按钮，默认是false
                layout:{
                    type: 'table' ,
                    columns:5 //设置表格布局默认列数为4列
                },
                frame: true ,
                tbar:[
                     '公式：' ,
                     new  Ext.form.field.Text({
                        id: 'expression' ,
                        readOnly: true ,
                        style: 'text-align:right'
                    }),
                     '=' ,
                     new  Ext.form.field.Text({
                        id: 'result' ,
                        width:60
                    })
                ],
                defaultType: 'button' ,
                defaults:{
                    minWidth:50,
                    handler:btnClick
                },
                items:[  //定义按钮
                    {text: '1' ,symbol: '1' },
                    {text: '2' ,symbol: '2' },
                    {text: '3' ,symbol: '3' },
                    {text: '(' ,symbol: '(' },
                    {text: ')' ,symbol: ')' },
                    {text: '4' ,symbol: '4' },
                    {text: '5' ,symbol: '5' },
                    {text: '6' ,symbol: '6' },
                    {text: '+' ,symbol: '+' },
                    {text: '-' ,symbol: '-' },
                    {text: '7' ,symbol: '7' },
                    {text: '8' ,symbol: '8' },
                    {text: '9' ,symbol: '9' },
                    {text: '*' ,symbol: '*' },
                    {text: '/' ,symbol: '/' },
                    {text: '0' ,symbol: '0' },
                    {text: '.' ,symbol: '.' },
                    {text: '=' ,symbol: '=' },
                    {text: 'C' ,symbol: 'clear' },
                    {text: 'back' ,symbol: 'back' }
                ]
            })
             var  expression = Ext.getCmp( 'expression' ); //取得id为expression的组件
             var  result = Ext.getCmp( 'result' ); //取得id为result的组件
             function  btnClick(btn){  //定义按钮事件
                 var  oldValue = expression.getValue();  //得到输入的值
                 if (btn.symbol ==  'back' ){  //如果选择后退键
                    oldValue = oldValue.subString(0,oldValue.length - 1);
                } else   if (btn.symbol ==  'clear' ){ //如果选择呢清除键
                    oldValue = '' ;
                    result.setValue( '' );
                } else   if (btn.symbol ==  '=' ){ //如果选择等于键
                    calculate();
                } 
                //else   if (btn.symbol ==  '.' ){ //如果选择小数点
                     //if (oldValue.indexOf( '.' ) != -1){
                       //  return ;
                    //}
                //} 
                else  {
                    oldValue += btn.symbol;
                }
                expression.setValue(oldValue);
            }
            
             function  calculate(){
                 var  str = expression.getValue();  //取得表达式的值
                 if (!Ext.isEmpty(str)){  //如果表达式的值不为空
                    Ext.Ajax.request({  //利用ajax异步调用
                        url: 'calAction.action' , //请求服务器的地址
                        method:'post',
                        params:{exp:str}, //请求参数
                        callback: function (options,success,response){ //回调函数
                             if (success){ //计算成功的话
                                result.setValue(response.responseText); //设置结果框的值
                            } else { //请求出错时，输出框显示erro r
                                result.setRawValue( 'error' );
                            }
                        }
                    })
                }
            }
        });  
    
    </script>
    
 
  </head>
  
  <body>
  <div id="btn" style="width: 20"></div>
  <div id="block" style="width: 270"></div>
  </body>

  </html>

页面形式如下：
 
 

Ext实现简单计算器的更多相关文章

  1. 1.C#WinForm基础制作简单计算器

    利用c#语言编写简单计算器: 核心知识点: MessageBox.Show(Convert.ToString(comboBox1.SelectedIndex));//下拉序号 MessageBox.S ...

  2. 菜鸟学Android编程——简单计算器《一》

    菜鸟瞎搞,高手莫进 本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...

  3. PAT 06-1 简单计算器

    想看一般简单计算器实现的看客不好意思了,这不是你想要点东西,此处题设为“只能进行加减乘除”.“都是整数”.”优先级相同“和"从左到右".此题来自PAT(http://www.pat ...

  4. php大力力 [005节] php大力力简单计算器001

    2015-08-22 php大力力005. php大力力简单计算器001: 上网看视频,看了半天,敲击代码,如下: <html> <head> <title>简单计 ...

  5. PHP实现简单计算器

    <!--简单的计算器--> <!DOCTYPE html> <html> <head> <title>PHP实现简单计算器</titl ...

  6. c#部分---网吧充值系统；简易的闹钟；出租车计费；简单计算器；对战游戏；等额本金法计算贷款还款利息等；随机生成10个不重复的50以内的整数；推箱子；

    网吧充值系统namespace ConsoleApplication1 { class Program { struct huiyuan { public string name; public st ...

  7. JavaWeb学习记录（二十）——Model1模式（javaBean+jsp）实现简单计算器案例

    ¨JSP技术提供了三个关于JavaBean组件的动作元素,即JSP标签,它们分别为: ¨<jsp:useBean>标签:用于在JSP页面中查找或实例化一个JavaBean组件. ¨< ...

  8. 一个用WPF做的简单计算器源代码

    一.界面设计XAML代码 <Window x:Class="fengjisuanqi.MainWindow" xmlns="http://schemas.micro ...

  9. hdu 1237 简单计算器

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1237 简单计算器 Description 读入一个只包含 +, -, *, / 的非负整数计算表达式, ...

随机推荐

  1. C# tostring()汇总

    原文:http://www.cnblogs.com/xiaopin/archive/2010/11/05/1870103.html C 货币 2.5.ToString("C") ￥ ...

  2. java应用测试报告生成(二):利用ant的build.xml生成测试报告

    1.将写好的项目导出 在工程下会生成一个build.xml的蚂蚁图标的文件. 2.右击该文件,选择run as Ant build 其中的测试目录是可以选择的,如果涉及到顺序也可以调整顺序 3.执行后 ...

  3. linux 查看磁盘、文件夹、文件大小(df du)

    du 查看文件夹大小 1.查看当前文件夹中所有文件夹及其子文件夹的大小,注意是文件夹大小,不是文件 # du -h -rw-r--r-- 1 root root 82785865 6月 9 15:53 ...

  4. oracle中的常用函数1-------decode方法

    DECODE函数是ORACLE PL/SQL是功能强大的函数之一,目前还只有ORACLE公司的SQL提供了此函数,其他数据库厂商的SQL实现还没有此功能.DECODE有什么用途呢? 先构造一个例子,假 ...

  5. VirtualBox中CentOS通过Host-Only方式实现虚拟机主机互相访问、共享上网

    VirtualBox常用的网络配置如下: 连接方式 主机访问虚拟机 虚拟机访问主机 虚拟机访问虚拟机 虚拟机访问外网 说明 网络地址转换(NAT) 不支持 支持 不支持 支持 默认连接方式,虚拟IP, ...

  6. JS中substr和substring的用法和区别

    substr 和 substring都是JS 截取字符串函数,两者用法很相近,下面是两者的语法很示例: substr 方法 返回一个从指定位置开始的指定长度的子字符串.stringvar.substr ...

  7. shell编程——if语句【转载】

    (2)shell编程——if语句_macg_新浪博客http://blog.sina.com.cn/s/blog_6151984a0100ekl6.html shell编程——if语句转载 if 语句 ...

  8. 转 Fragment 和 FragmentActivity的使用

    今天学习下 Android中的 Fragment 和 FragmentActivity,因为没有4.0手机,平台是2.3.3 所以我是使用 v4 support 包来进行学习. 要想用Fragment ...

  9. Envelope几何对象 Curve对象几何对象 Multipatch几何对象 Geometry集合接口 IGeometryCollection接口

    Envelope是所有几何对象的外接矩形,用于表示几何对象的最小边框,所有的几何对象都有一个Envelope对象,IEnvelope是Envelope对象的主要接口,通过它可以获取几何对象的XMax, ...

  10. Ubuntu新建用户

    新建用户的命令是useradd,修改密码是passwd,如下: sudo useradd linc sudo passwd linc 但是问题出现了,home目录下并没有相对应的linc目录. 原来u ...