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