以下是本人原创，如若转载和使用请注明转载地址。本博客信息切勿用于商业，可以个人使用，若喜欢我的博客，请关注我，谢谢！少帅的博客
使用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 HTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>基于ExtJS的计算器</title>
<linkrel="stylesheet"type="text/css"href="<%=basePath%>js/resources/css/ext-all.css">
<scripttype="text/javascript"src="<%=basePath%>js/ext-debug.js"></script>
<scripttype="text/javascript"src="<%=basePath%>js/ext-all-debug.js"></script>
<scripttype="text/javascript"src="<%=basePath%>js/jquery-1.9.0.js"></script>
<scripttype="text/javascript">
function(){
//$("#block").hide();
"#btn").click(function(){
"#block").toggle();
});
});
function
"Ext.Button", {
"btn"),
"计算器",
true, //是否允许按钮被按下的状态
true, //是否允许按钮在弹起和按下两种状态中切换
"bt1"
});
new Ext.dd.DDProxy('block');//定义面板可以任意拖动
//Ext.Msg.alert('提示', '执行方法 Ext.onReady()');//测试ext能否使用
var calPanel = new Ext.panel.Panel({ //定义面板
'计算器' , //标题
'block', //将显示指向页面的body
//设置间隔
//面板宽度
true,//定义面板的关闭按钮，默认是false
layout:{
'table'
//设置表格布局默认列数为4列
},
true
tbar:[
'公式：'
new
'expression'
true
'text-align:right'
}),
'='
new
'result'
width:60
})
],
'button'
defaults:{
minWidth:50,
handler:btnClick
},
//定义按钮
'1' ,symbol: '1'
'2' ,symbol: '2'
'3' ,symbol: '3'
'(' ,symbol: '('
')' ,symbol: ')'
'4' ,symbol: '4'
'5' ,symbol: '5'
'6' ,symbol: '6'
'+' ,symbol: '+'
'-' ,symbol: '-'
'7' ,symbol: '7'
'8' ,symbol: '8'
'9' ,symbol: '9'
'*' ,symbol: '*'
'/' ,symbol: '/'
'0' ,symbol: '0'
'.' ,symbol: '.'
'=' ,symbol: '='
'C' ,symbol: 'clear'
'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' ){ //如果选择呢清除键
''
''
else if (btn.symbol == '=' ){ //如果选择等于键
calculate();
}
//else if (btn.symbol == '.' ){ //如果选择小数点
//if (oldValue.indexOf( '.' ) != -1){
// return ;
//}
//}
else
oldValue += btn.symbol;
}
expression.setValue(oldValue);
}
function
var str = expression.getValue(); //取得表达式的值
if (!Ext.isEmpty(str)){ //如果表达式的值不为空
//利用ajax异步调用
'calAction.action' , //请求服务器的地址
'post',
//请求参数
function (options,success,response){ //回调函数
if (success){ //计算成功的话
//设置结果框的值
else { //请求出错时，输出框显示erro r
'error'
}
}
})
}
}
});
</script>
</head>
<body>
<divid="btn"style="width: 20"></div>
<divid="block"style="width: 270"></div>
</body>
</html>
页面形式如下：
作者：少帅