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