Here are the steps to create a simple calculator using Ext Js and JavaScript which can evaluate simple arithmetic on integer numbers. Two types of inputs text and button are used here on a table within a form element and button Handlers was used to insert button values on the screen or to evaluate the numbers.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.application({
name : 'Fiddle',
launch : function() {
//variable to store expressions and results
var number1="0";
//initial display text
var paneltext='<span style="text-align:right;float:right">'+number1+'</span>';
//Defining panel for display of calculator
var childPanel1 = Ext.create('Ext.Panel', {
layout:'column',
width:'100%',
html: paneltext,
align:'right',
dock:'top',
width:'100%',
margin:'0px',
padding:'0px'
});
//defining the main control panel with numeric and symbol buttons
var buttonpanel = Ext.create('Ext.Panel', {
layout:'column',
width:'100%',
items:[
{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '7',
handler: function(){concat(this.text)}
//event to concatenate numbers to display
},{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '8',
handler: function(){concat(this.text)}
},{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '9',
handler: function(){concat(this.text)}
},
{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '/',
handler: function(){concat(this.text)}
},{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '4',
handler: function(){concat(this.text)}
},{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '5',
handler: function(){concat(this.text)}
},
{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '6',
handler: function(){concat(this.text)}
},{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '*',
handler: function(){concat(this.text)}
},{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '1',
handler: function(){concat(this.text)}
},{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '2',
handler: function(){concat(this.text)}
},
{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '3',
handler: function(){concat(this.text)}
},{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '-',
handler: function(){concat(this.text)}
},{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '0',
handler: function(){concat(this.text)}
},{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: 'CE',
handler: function(){clear()}
},{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '=',
handler: function(){calculate()}
},{xtype:'button',
columnWidth : 0.23,
margin:'2px',
text: '+',
handler: function(){concat(this.text)}
}],
});
//function to clear display and the variable
function clear()
{
number1="0";
paneltext='<span style="text-align:right;float:right">'+number1+'</span>';
childPanel1.setHtml(paneltext);
}
//function to display values to screen
function concat(str){
if(number1=='0')
{
number1=str;
}
else
{
number1=number1+str;
}
paneltext='<span style="text-align:right;float:right">'+number1+'</span>';
childPanel1.setHtml(paneltext);
}
//main function to evaluate the arithmetic expression and displaying the results
function calculate()
{
number1=eval(number1);
paneltext='<span style="text-align:right;float:right">'+number1+'</span>';
childPanel1.setHtml(paneltext);
}
//main Extjs window to host the child panels of the application
var win = new Ext.Window({
title:'Calculator',
layout:'form',
width:300,
closeAction:'close',
plain: true,
items: [childPanel1,buttonpanel],
});
win.show();
}
});
</script>
</head>
<body>
</body>
</html>
Here is Output
