Use ext designer to design a simple calculator

Use extdesigner to design a simple calculator

 

I. design philosophy.

The main function of the calculator is to use it. The Calculator should be able to calculate the addition, subtraction, multiplication, division, and clear the reset function. Analyze the controls and la s required for the design of extdesigner In the calculator, and the number of controls required.

 

2. design steps.

1. Open the extdesigner software and create a new project. The interface is as follows:

2. The window of the calculator does not need to be displayed in full screen, so the vewport control is not required,

 The calculator only needs a window control to display, which can be beautiful. Window Control

3. Drag the window control to the design interface, set the ID attribute of the window to window, and layout to absolute. The title attribute is a calculator. Set

 

In this step, save the project.

4. Drag the required controls to the window interface once. The widget used by the calculator has 16 button buttons and a textfield text box.

. Drag 16 buttons to the window at a time to adjust the distance between buttons. Drag textfield to the window to resize it. Then, modify the ID and title attributes of the button. Modification result

 

In this step, the calculator interface has been designed and the project file is saved again.

5. After saving the job description, click the button to export the project so that you can program it.

 

3. Design Code.

1. open the file with the. js extension in the hexadecimal editor at the location where the file is saved. Open

2. Write the Code. The Code for mounting each control is as follows:

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. Compile the Click Event function for each button. The click code of the button is as follows:

On_btn1click: function (OBJ, e ){

VaR TMP = ext. getcmp ('txtjg'). getvalue ();

TMP = TMP + '1 ';

Ext. getcmp ('txtjg'). setvalue (TMP );

}

Declare a variable TMP to obtain the value of the txtjg object and assign it to TMP. Then, set the click event of button1 so that the value of btn1 and 1 will be sent to the txtjg text box. The same applies to other buttons.

4. A switch statement is used for addition, subtraction, multiplication, division, and syntax code:

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 = '';

First, declare a global variable flag so that the flag value is an operator.

4. design results.

The design result is a simple calculator.

 

 

5. Problems Encountered during design.

1. I did not notice the use of global variables and local variables. A problem occurred while saving the data. A global variable must be defined when the data to be saved is used elsewhere.

2. When writing the global variable flag, the Declaration is inconsistent with the flag used below, resulting in running failure. This is a syntax error. Pay special attention to this problem when writing code. The declared variables cannot be written incorrectly.

3. During the entire programming process, if there is no result. Use alert () to check errors at any time.