I need help in Sencha Calculator working Real Time - sencha-touch

Question

am trying to build a calculator that binds data in real time without the user pressing the calculate button. so far i can get my application to work but the user has to hit on the calculate button to perform the calculation which is not what i want.
My problem now is how can i make my calculator to work on real time meaning that once the first, second and third text-fields are filled, the fourth text-field will auto generate the answer without the calculation button being pressed. 1 + 1 + 1 = (3) the 3 will be auto generated in real time once the first 3 text-fields are filled. below are my codes so far:
Ext.define("ikhlas.view.login", {
extend: 'Ext.Panel',
xtype: 'loginpanel',
config:{
title: 'Login',
iconCls: 'more',
styleHtmlContent: true,
layout:{
type: 'vbox',
},
items: [
{
xtype: 'container',
iconCls: 'add',
items: [
{
xtype: 'textfield',
name: 'email',
id: 'txtField1',
placeHolder: 'Sum 1'
},
{
xtype: 'spacer',
height: 10,
},
{
xtype: 'textfield',
name: 'password',
id: 'txtField2',
placeHolder: 'Sum 2'
},
{
xtype: 'spacer',
height: 10,
},
{
xtype: 'textfield',
name: 'password',
id: 'txtField3',
placeHolder: 'Sum 3'
},
{
xtype: 'spacer',
height: 10,
},
{
xtype: 'textfield',
id: 'txtField4',
name: 'password',
placeHolder: 'Sum 4'
},
]},
{
xtype: 'button',
text: 'Calculate',
ui: 'confirm',
width: '30%',
height: '6%',
flex: 1,
left: '55%',
top: '65%',
action: 'submitBtn'
},
]}
});
And my Controller looks like this:
Ext.define('ikhlas.controller.SubmitController',{
extend: 'Ext.app.Controller',
config:{
refs:{
submitBtn: '#submitBtn',
txtField1: '#txtField1',
txtField2: '#txtField2',
txtField3: '#txtField3',
txtField4: '#txtField4'
},
control:{
'button[action=submitBtn]':{
tap :'submitbutton'
}
}
},
submitbutton:function(){
var value1 = Ext.getCmp('txtField1').getValue();
var value2 = Ext.getCmp('txtField2').getValue();
var value3 = Ext.getCmp('txtField3').getValue();
var value4;
value4 = value1 * value2 * value3;
Ext.getCmp('txtField4').setValue(value4);
}
});
So far the app is working fine with the code giving, but i need a real time calculation that's my objective. Hope someone can help out.
My store and My model are all empty for now.

Answer 1

I haven´t tried it myself, but I think you have to listen to the changeevent of your textfields and whenever a value changes, you have to recalculate the value.
So for every of your input textfields, add this to your controller:
control: {
'button[action=submitBtn]': {
tap: 'submitbutton'
},
// this should call your submitbutton function which calculates the values
// every time the value of textfield1 changes
txtField1: {
change: 'submitbutton',
}
}

Answer 2

A Simple caculator
Ext.define('Calc.view.Main', {
extend: 'Ext.form.Panel',
fullscreen:true,
config: {
items: [
{
layout:'vbox',
style:'background-color:blue',
flex:1,
items:[
{
xtype:'textareafield',
name:'display',
style:'border:5px inset blue',
id:'display',
value:"0"
}
]
},
{
layout:'hbox',
style:'background-color:#cccccc',
flex:1,
items :[
{
xtype:'button',
text:'1',
style:'border:5px inset blue',
flex:1,
ui:'confirm',
handler: function() {
var num=Ext.getCmp('display').getValue();
if(num==0) {
Ext.getCmp('display').setValue("1");
}
else
{
num=num+"1";
Ext.getCmp('display').setValue(num);
}
console.log(num);
}
},
{
xtype:'button',
text:'2',
flex:1,
style:'border:5px inset blue',
ui:'confirm',
handler: function() {
console.log("print 2");
var num=Ext.getCmp('display').getValue();
if(num==0) {
Ext.getCmp('display').setValue("2");
}
else
{
num=num+"2";
Ext.getCmp('display').setValue(num);
}
console.log(num);
/*Ext.getCmp('display').setValue("2");
var num=Ext.getCmp('display').getValue();
num=num*10+1;
Ext.getCmp('display').setValue(num);
console.log(num);*/
}
},
{
xtype:'button',
text:'3',
style:'border:5px inset blue',
flex:1,
ui:'confirm',
handler: function() {
console.log("print 3");
var num=Ext.getCmp('display').getValue();
if(num==0) {
Ext.getCmp('display').setValue("3");
}
else
{
num=num+"3";
Ext.getCmp('display').setValue(num);
}
console.log(num);
}
}
]
},
{
layout:'hbox',
style:'background-color:#909090',
flex:1,
items:[
{
xtype:'button',
text:'4',
style:'border:5px inset blue',
flex:1,
ui:'confirm',
handler: function() {
console.log("print 4");
var num=Ext.getCmp('display').getValue();
if(num==0) {
Ext.getCmp('display').setValue("4");
}
else
{
num=num+"4";
Ext.getCmp('display').setValue(num);
console.log(num);
}
}
},
{
xtype:'button',
text:'5',
flex:1,
style:'border:5px inset blue',
ui:'confirm',
handler: function() {
console.log("print 5");
var num=Ext.getCmp('display').getValue();
if(num==0) {
Ext.getCmp('display').setValue("5");
}
else
{
num=num+"5";
Ext.getCmp('display').setValue(num);
}
console.log(num);
}
},
{
xtype:'button',
text:'6',
flex:1,
style:'border:5px inset blue',
ui:'confirm',
handler: function() {
console.log("print 6");
var num=Ext.getCmp('display').getValue();
if(num==0) {
Ext.getCmp('display').setValue("6");
}
else
{
num=num+"6";
Ext.getCmp('display').setValue(num);
}
console.log(num);
}
}
]
},
{
layout:'hbox',
style:'background-color:#A0A0A0',
flex:1,
items:[
{
xtype:'button',
text:'7',
style:'border:5px inset blue',
flex:1,
ui:'confirm',
handler: function() {
console.log("print 7");
var num=Ext.getCmp('display').getValue();
if(num==0) {
Ext.getCmp('display').setValue("7");
}
else
{
num=num+"7";
Ext.getCmp('display').setValue(num);
}
console.log(num);
}
},
{
xtype:'button',
text:'8',
style:'border:5px inset blue',
flex:1,
ui:'confirm',
handler: function() {
console.log("print 8");
var num=Ext.getCmp('display').getValue();
if(num==0) {
Ext.getCmp('display').setValue("8");
}
else
{
num=num+"8";
Ext.getCmp('display').setValue(num);
console.log(num);
}
}
},
{
xtype:'button',
text:'9',
style:'border:5px inset blue',
flex:1,
ui:'confirm',
handler: function() {
console.log("print 9");
var num=Ext.getCmp('display').getValue();
if(num==0) {
Ext.getCmp('display').setValue("9");
}
else
{
num=num+"9";
Ext.getCmp('display').setValue(num);
}
console.log(num);
}
}
]
},
{
layout:'hbox',
style:'background-color:#808080',
flex:1,
items: [
{
xtype:'button',
text:'+',
style:'border:5px inset blue',
flex:1,
ui:'confirm',
handler: function() {
var num = new Array();
num=Ext.getCmp('display').getValue();
var len=num.length;
console.log(len);
var sub=num.substr(len-1,len);
console.log(sub);
if(sub!= "+" && sub!="-" && sub!="*" &&sub!="/")
{
num=num+"+";
Ext.getCmp('display').setValue(num);
}
console.log("print +");
}
},
{
xtype:'button',
text:'0',
flex:1,
style:'border:5px inset blue',
ui:'confirm',
handler: function() {
console.log("print 0");
var num=Ext.getCmp('display').getValue();
if(num==0) {
num=num+"0";
Ext.getCmp('display').setValue(num);
}
else
{
num=num+"0";
Ext.getCmp('display').setValue(num);
console.log(num);
}
}
},
{
xtype:'button',
text:'=',
flex:1,
style:'border:5px inset blue',
ui:'confirm',
handler: function() {
console.log("print =");
var exp=new Array();
exp=Ext.getCmp('display').getValue();
var len=exp.length;
var sub=exp.substr(len-1,len);
console.log(sub);
if(sub!= "+" && sub!="-" && sub!="*" && sub!="/")
{
console.log(eval(exp));
Ext.getCmp('display').setValue(eval(exp));
}
}
}
]
},
{
layout:'hbox',
style:'background-color:#2FAA96',
flex:1,
items: [
{
xtype:'button',
text:'-',
flex:1,
style:'border:5px inset blue',
ui:'confirm',
handler: function() {
console.log("print -");
var num = new Array()
num=Ext.getCmp('display').getValue();
var len=num.length;
var sub=num.substr(len-1,len);
if(sub!= "+" && sub!="-" && sub!="*" &&sub!="/")
{
num=num+"-";
Ext.getCmp('display').setValue(num);
console.log("print -");
}
}
},
{
xtype:'button',
text:'*',
style:'border:5px inset blue',
flex:1,
ui:'confirm',
handler: function() {
console.log("print *");
var num = new Array()
num=Ext.getCmp('display').getValue();
var len=num.length;
var sub=num.substr(len-1,len);
if(sub!= "+" && sub!="-" && sub!="*" &&sub!="/")
{
num=num+"*";
Ext.getCmp('display').setValue(num);
console.log("print *");
}
}
},
{
xtype:'button',
text:'/',
style:'border:5px inset blue',
flex:1,
ui:'confirm',
handler: function() {
console.log("print /");
var num = new Array()
num=Ext.getCmp('display').getValue();
var len=num.length;
var sub=num.substr(len-1,len);
if(sub!= "+" && sub!="-" && sub!="*" &&sub!="/")
{
num=num+"/";
Ext.getCmp('display').setValue(num);
console.log("print /");
}
}
},
]
},
{
layout:'hbox',
flex:8,
style:'background-color:red',
items: [
{
xtype:'button',
text:'clear',
style:'border:5px inset blue',
flex:1,
ui:'small',
handler: function() {
var cl=Ext.getCmp('display').getValue();
cl="";
Ext.getCmp('display').setValue(cl);
}
},
{
xtype:'button',
text:'cancel',
flex:2,
ui:'back',
handler:function() {
var no= new Array();
no=Ext.getCmp('display').getValue();
var len=no.length;
var sub=no.slice(0,len-1)
console.log(sub);
Ext.getCmp('display').setValue(sub);
}
}
]
}
]
}
});