Как передать аргумент в файле контроллера с помощью функции в sencha touch

Question

Я создал приложение sencha touch на своем локальном сервере. В этом приложении есть одно текстовое поле и три кнопки.
Ниже мой app.js файл

Ext.application({ 
name: 'MyApp', 

requires: [ 
    'Ext.MessageBox' 
], 

views: [ 
    'Main' 
], 

controllers: [ 
    'CalcController' 
], 

icon: { 
    '57': 'resources/icons/Icon.png', 
    '72': 'resources/icons/Icon~ipad.png', 
    '114': 'resources/icons/Icon@2x.png', 
    '144': 'resources/icons/Icon~ipad@2x.png' 
}, 

isIconPrecomposed: true, 

startupImage: { 
    '320x460': 'resources/startup/320x460.jpg', 
    '640x920': 'resources/startup/640x920.png', 
    '768x1004': 'resources/startup/768x1004.png', 
    '748x1024': 'resources/startup/748x1024.png', 
    '1536x2008': 'resources/startup/1536x2008.png', 
    '1496x2048': 'resources/startup/1496x2048.png' 
}, 

launch: function() { 
    // Destroy the #appLoadingIndicator element 
    Ext.fly('appLoadingIndicator').destroy(); 

    // Initialize the main view 
    Ext.Viewport.add(Ext.create('MyApp.view.Main')); 
}, 

onUpdated: function() { 
    Ext.Msg.confirm(
     "Application Update", 
     "This application has just successfully been updated to the latest version. Reload now?", 
     function(buttonId) { 
      if (buttonId === 'yes') { 
       window.location.reload(); 
      } 
     } 
    ); 
} 

});

Ниже мой Main.js файл

Ext.define('MyApp.view.Main', { 
extend: 'Ext.form.Panel', 
xtype: 'main', 
requires: [ 
    'Ext.TitleBar', 
    'Ext.Video' 
], 
config: { 
    items: [ 
     { 
      xtype:'textfield', 
      name:'txtDisplay', 
      id:'idDisplay', 
      readOnly:true, 
     }, 
     { 
      xtype:'button', 
      name:'btnClear', 
      id:'idClear', 
      width:'25%', 
      text:'C', 
      style:'float:left;', 
     }, 
     { 
      xtype:'button', 
      name:'btnSeven', 
      id:'idSeven', 
      width:'25%', 
      text:'7', 
      style:'float:left; clear:both;', 
      //action: 
      handler: function() 
      { 
       var x = Ext.getCmp('idSeven')._text; 
       Ext.getCmp('idDisplay').setValue(x); 
      } 
     }, 
     { 
      xtype:'button', 
      name:'btnEight', 
      id:'idEight', 
      width:'25%', 
      text:'8', 
      style:'float:left;', 
      action:'displayNum', 
     } 
    ] 
} 

});

Ниже мой CalcController.js файл

Ext.define('MyApp.controller.CalcController', { 
extend: 'Ext.app.Controller', 
config: { 
    control: { 
     'button[action=displayNum]' : { 
      tap: 'displayNum' 
     }, 
    } 
}, 
displayNum: function() 
{ 
    console.log("This click event works"); 
} 

});

Теперь мой вопрос следующий:
Когда я нажимаю кнопку с именем btnSeven, она отображает цифру 7 в текстовом поле, означает, что функция обработчика работает. Теперь я хочу код события клика в файле CalcController.js вместо того, чтобы писать функцию обработчика в файле Main.js, для этого я создал вторую кнопку с именем btnEight и дал action:'displayNum', поэтому, когда событие с нажатой кнопкой мыши переходит в файл CalcController.js.

Когда я нажал кнопку с именем btnEight, я хочу отобразить цифру 8 в текстовом поле с помощью написания кода в файле CalcController.js вместо записи функции hander в файле Main.js. Итак, как это сделать?

Answer 1

Я решил выше мой вопрос следующим способом:

Теперь мой Main.js файл выглядит следующим образом:

Ext.define('MyApp.view.Main', { 
extend: 'Ext.form.Panel', 
xtype: 'main', 
    requires: [ 
     'Ext.TitleBar', 
     'Ext.Video' 
    ], 
    config: { 
     items: [ 
      { 
       xtype:'textfield', 
       name:'txtDisplay', 
       id:'idDisplay', 
       readOnly:true, 
      }, 
      { 
       xtype:'button', 
       name:'btnClear', 
       id:'idClear', 
       width:'25%', 
       text:'C', 
       style:'float:left;', 
       action: 'clearDisplay', 
      }, 
      { 
       xtype:'button', 
       name:'btnSeven', 
       id:'idSeven', 
       width:'25%', 
       text:'7', 
       style:'float:left; clear:both;', 
       action: 'displayNum', 
       /*handler: function() 
       { 
        var x = Ext.getCmp('idSeven')._text; 
        Ext.getCmp('idDisplay').setValue(x); 
       }*/ 
      }, 
      { 
       xtype:'button', 
       name:'btnEight', 
       id:'idEight', 
       width:'25%', 
       text:'8', 
       style:'float:left;', 
       action:'displayNum', 
      } 
     ] 
    } 
}); 

и CalcController.js файл выглядит следующим образом:

Ext.define('MyApp.controller.CalcController', { 
extend: 'Ext.app.Controller', 
    config: { 
     control: { 
      'button[action=displayNum]' : { 
       tap: 'displayNum' 
      }, 
      'button[action=clearDisplay]' : { 
       tap: 'clearDisplay' 
      }, 
     } 
    }, 
    displayNum: function(button, e, eOpts) 
    { 
     var x = Ext.getCmp('idDisplay')._value + button._text; 
     Ext.getCmp('idDisplay').setValue(x); 
    }, 
    clearDisplay: function(button, e, eOpts) 
    { 
     Ext.getCmp('idDisplay').setValue(''); 
    } 
}); 

Используя этот метод, я передаю свойства моей кнопки в файле контроллера с помощью нажатия кнопки e вентиляционное отверстие.

Answer 2

1. Вместо определения Id для компонента определяют Item ID

2. В контроллере вы должны определить ссылки в конфигурации.

   config: { 
   refs: { 
       'idDisplay': 'main #idDisplay' // idDisplay is itemId not Id here 
   }, 
   control: { 
   'button[action=displayNum]' : { 
       tap: 'displayNum' 
       } 
   } 
   }, 
   

и displayNum кода функции записи, как это.

displayNum: function(btn) 
{ 
    var display = this.getIdDisplay(); 
    display.setValue(btn.getText()); 
}