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

Calculator using Ext Js and Javascripts

  Modified On Mar-16-2018 11:57:59 PM

Leave Comment