extjs - Sencha Touch 2 计算器实时绑定

Question

我正在开发一个具有计算器功能的应用程序：例如，我有 4 个文本字段，当用户在第一个字段、第二个字段和第三个字段中输入数字时，该应用程序将自动计算并给出答案没有用户按下任何按钮的第 4 个字段。1 + 1 + 1 = 3 答案是 3 是自动计算的。我的文本字段的代码是：

Ext.define("ikhlas.view.assetallocate", {
    extend: 'Ext.Panel',
    xtype: 'assetpanel',

    config: {
        title: 'Asset',
        iconCls: 'info',
        scrollable: true,
        styleHtmlContent: true,

        items: [{
            layout: 'hbox',
            items: [{
                html: 'Sum 1:',
                flex: 1

            }, {
                xtype: 'textfield',
                flex: 1
            }, ]

        }, {
            xtype: 'spacer',
            height: 10

        }, {
            layout: 'hbox',
            items: [{
                html: 'Sum 2:',
                flex: 1

            }, {
                xtype: 'textfield',
                flex: 1
            }, ]

        }, {
            xtype: 'spacer',
            height: 10

        }, {
            layout: 'hbox',
            items: [{
                html: 'Sum 3:',
                flex: 1

            }, {
                xtype: 'textfield',
                flex: 1
            }, ]

        }, {
            xtype: 'spacer',
            height: 10

        }, ]
    }
});

我的控制器看起来像这样，它仍然是空的：

Ext.define('ikhlas.controller.SubmitController', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {

        },
        control: {


        }
    },

    submitbutton: function () {

    }
});

我的商店和我的模型现在都是空的。谁能帮我设置一下这真的让我很难过吗？

Answer 1

首先，像这样给id你们每个人财产，4 textfield

xtype:' textfield',
id: 'txtField1'

等等。然后，Submit在您的垫片下方添加按钮代码，

{
   xtype: 'button',
   text:'Submit',
   id: 'submitBtn'
}

然后，在你的controller文件中，这样写，

config:{
    refs:{
       submitBtn: '#submitBtn',
       txtField1: '#txtField1',
       txtField2: '#txtField2',
       txtField3: '#txtField3',
       txtField4: '#txtField4'
    },
    control:{
       submitBtn: {
           tap: 'submitBtnTapFn' 
       }
    }
},

submitBtnTapFn : 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);
}