使用Ext Designer 设计简单计算器

使用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()来查错误。