使用ExtDesigner 设计简单计算器
一， 设计思想。
计算器的设计主要功能是使用，做出来的计算器要能简单的计算加减乘除法的运算，清除复位功能。分析计算器用ExtDesigner设计需要用到哪些控件及布局情况，还有需要用到多少个控件等一些情况。
二， 设计步骤。
1.打开ExtDesigner软件，新建一个project工程。界面如下：
2.计算器的窗口不需要全屏显示，所以不需要vewport控件，如图：
计算器只需要一个window控件就可以显示，这样做可以做到美观。Window控件如图：
3.把window控件拖到设计界面，设置window的id属性为window，属性layout为absolute。Title属性为计算器。设置如图：
到此步骤先保存一下工程。
4.把需要用到的控件一次拖到window界面上去。计算器用到的控件有16个Button按钮，一个textField文本框。如图：
.一次拖16个Button到window上，调整各个按钮之间的距离。把TextField拖到window上，调整大小。然后，修改Button的id属性和title属性。修改结果如图：
到此步骤，计算器界面化已经设计好了，然后再次保存工程文件。
5.保存好工程文后，单击按钮，导出工程，这样就可以去编程了。
三， 设计代码。
1. 到保存文件位置用十六进制编辑器打开扩展名为.js的文件。打开如图：
2.接下来写代码，先挂载各个控件代码如下：
Ext.getCmp("btn1").on('click',this.on_btn1Click,this);
Ext.getCmp("btn2").on('click',this.on_btn2Click,this);
Ext.getCmp("btn3").on('click',this.on_btn3Click,this);
Ext.getCmp("btn4").on('click',this.on_btn4Click,this);
Ext.getCmp("btn5").on('click',this.on_btn5Click,this);
Ext.getCmp("btn6").on('click',this.on_btn6Click,this);
Ext.getCmp("btn7").on('click',this.on_btn7Click,this);
Ext.getCmp("btn8").on('click',this.on_btn8Click,this);
Ext.getCmp("btn9").on('click',this.on_btn9Click,this);
Ext.getCmp("btn0").on('click',this.on_btn0Click,this);
Ext.getCmp("btnADD").on('click',this.on_btnADDClick,this);
Ext.getCmp("btnE").on('click',this.on_btnEClick,this);
Ext.getCmp("btnSUB").on('click',this.on_btnSUBClick,this);
Ext.getCmp("btnMUL").on('click',this.on_btnMULClick,this);
Ext.getCmp("btnDIV").on('click',this.on_btnDIVClick,this);
Ext.getCmp("btnC").on('click',this.on_btnCClick,this);
3. 编写各个按键的Click事件函数，按键的Click代码如下：
on_btn1Click:function(obj,e){
var tmp=Ext.getCmp('txtJG').getValue();
tmp=tmp+'1';
Ext.getCmp('txtJG').setValue(tmp);
}
先申明一个变量tmp，获取txtJG对象的值，便赋值给tmp。然后设置Button1的Click事件，使单击btn1,1这个值就被送到txtJG文本框里面去了。其他按键同样如此做法。
4.最后实现加减乘除用到一个switch语句，语法代码下：
switch(falg)
{
case'+':Ext.getCmp('txtJG').setValue(Number(tmp)+Number(g_a));break;
case'-':Ext.getCmp('txtJG').setValue(Number(g_a)-Number(tmp));break;
case'*':Ext.getCmp('txtJG').setValue(Number(g_a)*Number(tmp));break;
case'/':Ext.getCmp('txtJG').setValue(Number(g_a)/Number(tmp));break;
}
flag='';
先要申明一个全局变量flag，让flag的值是运算符。
四， 设计结果。
设计结果就是一个简单的计算器。如图：
五， 设计中遇到的问题。
1. 没有注意到全局变量与局部变量的使用，在保存数据时出了问题。要保存的数据在其他地方要用到时必须定义一个全局变量来存放。
2. 在写全局变量flag时，声明与下面用到的flag不一致，导致运行不出来。这是语法错误，在写代码时候要特别注意这样的小毛病。不能把声明的变量写错。
3. 在整个编程过程中，如果遇到没有结果时侯。随时用alert()来查错误。
