我正在尝试构建一个实时绑定数据的计算器,而无需用户按下“计算”按钮。到目前为止,我可以使我的应用程序正常工作,但用户必须单击“计算”按钮才能执行计算,这不是我想要的。我现在的问题是如何使我的计算器实时工作,这意味着一旦第一个,第二个和第三个文本字段被填充,第四个文本字段将自动生成答案,而无需按下计算按钮。1 + 1 + 1 =(3)一旦填充了前3个文本字段,则实时实时自动生成3。以下是到目前为止的代码:<br/>Ext.define(“ikhlas.view.login”, {<br/>extend: ‘Ext.Panel’,<br/>xtype: ‘loginpanel’,</p>
<pre><code>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'
},
</code></pre><p>]},<br/> {<br/> xtype: ‘button’,<br/> text: ‘Calculate’,<br/> ui: ‘confirm’,<br/> width: ‘30%’,<br/> height: ‘6%’,<br/> flex: 1,<br/> left: ‘55%’,<br/> top: ‘65%’,<br/> action: ‘submitBtn’<br/> },</p>
<pre><code>]}
</code></pre><p>});<br/><code>
我的控制器看起来像这样:
</code><br/>Ext.define(‘ikhlas.controller.SubmitController’,{<br/>extend: ‘Ext.app.Controller’,</p><p>config:{</p><p>refs:{<br/> submitBtn: ‘#submitBtn’,<br/> txtField1: ‘#txtField1’,<br/> txtField2: ‘#txtField2’,<br/> txtField3: ‘#txtField3’,<br/> txtField4: ‘#txtField4’<br/>},</p>
<pre><code>control:{
'button[action=submitBtn]':{
tap :'submitbutton'
}
}
</code></pre><p>},</p><p>submitbutton:function(){</p>
<pre><code>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);
</code></pre><p>}<br/>});<br/>
到目前为止,该应用程序在代码给出方面运行良好,但是我需要实时计算才是我的目标。希望有人可以帮忙。我的商店和我的模型现在都空着。