zoukankan      html  css  js  c++  java
  • Ext实现简单计算器

    以下是本人原创,如若转载和使用请注明转载地址。本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!少帅的博客
    使用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, //设置间隔
                    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' ,
                            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=" 20"></div>
      <div id="block" style=" 270"></div>
      </body>
      </html>
    页面形式如下:
     
     





  • 相关阅读:
    项目结队开发---NABC分析(成员)
    梦断代码读后感(二)
    梦断代码读后感(一)
    首尾相连的循环数组求其子数组最大值
    子数组求和之大数溢出
    梦断代码读后感——终结
    软件工程结对开发——一维最大子数组求和溢出问题
    结对开发——求环形一维数组最大子数组的和
    结对开发——电梯调度问题需求分析
    软件工程——求二维数组所有子矩阵的和的最大值
  • 原文地址:https://www.cnblogs.com/wang3680/p/7d6032ba41b1523fe86daa8523ac0822.html
Copyright © 2011-2022 走看看