以下是本人原创，如若转载和使用请注明转载地址。本博客信息切勿用于商业，可以个人使用，若喜欢我的博客，请关注我，谢谢！少帅的博客
使用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>
页面形式如下：