extjs - Sencha Touch 2 電卓リアルタイムバインディング

Question

電卓機能を備えたアプリを開発しています: たとえば、4 つのテキスト フィールドがあり、ユーザーが最初のフィールド、2 番目のフィールド、3 番目のフィールドに数字を入力すると、アプリは自動計算して答えを出しますユーザーがボタンを押さずに 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);
}