我正在尝试构建一个实时绑定数据的计算器，而无需用户按下计算按钮。到目前为止，我可以让我的应用程序工作，但用户必须点击计算按钮来执行不是我想要的计算。 我现在的问题是如何让我的计算器实时工作，这意味着一旦填充了第一，第二和第三个文本字段，第四个文本字段将自动生成答案而不按下计算按钮。 1 + 1 + 1 =（3）填充前3个文本字段后，将实时自动生成3。以下是我目前的代码：
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'
},
]}
});
我的控制器看起来像这样：
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);
}
}）;
到目前为止，应用程序在代码提供方面运行良好，但我需要一个实时计算，这是我的目标。希望有人可以帮忙。 我的商店和我的模特现在都是空的。
答案 0 :(得分：0)
我自己没有尝试过，但我认为您必须听取文本字段的change事件，并且每当值发生变化时，您都必须重新计算该值。
因此，对于每个输入文本字段，请将其添加到控制器：
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',
}
}
答案 1 :(得分：0)
Ext.define（＆＃39; Calc.view.Main＆＃39;，{ 延伸：＆＃39; Ext.form.Panel＆＃39;， 全屏：真，
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);
}
}
]
}
]
}
}）;