Question

Am developing an app which has a calculator function: for example, i have 4 text-fields, when a user keys in the a number in the first field, second field and third field, the app will auto calculate and give the answer on the 4th field with out the user pressing any button.
1 + 1 + 1 = 3 the answer which is 3 is auto calculated. the code for my text-field are:

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

        }, ]
    }
});

My controller looks like this, its still empty:

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

    config: {
        refs: {

        },
        control: {


        }
    },

    submitbutton: function () {

    }
});

My store and My model are all empty for now. Who can help me out set up this its really giving me a hard time?

Answer 1

Firstly, give id property to each of your 4 textfield like this,

xtype:' textfield',
id: 'txtField1'

and so on.
Then,
Add the Submit button code below your spacer,

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

and then, in your controller file, write like this,

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