How to pass argument in Controller file using function in sencha touch - sencha-touch

Question

I have created one sencha touch application in my localserver.
In that application, there are one textfield, and three buttons.
The following is my app.js file
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();
}
}
);
}
});
The following is my Main.js file
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',
}
]
}
});
The following is my CalcController.js file
Ext.define('MyApp.controller.CalcController', {
extend: 'Ext.app.Controller',
config: {
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
},
}
},
displayNum: function()
{
console.log("This click event works");
}
});
Now my question is as following:
When i press button named btnSeven it display digit 7 in textfield means handler function works.
Now i want click event code in CalcController.js file instead of writing handler function in Main.js file for that i created second button named btnEight and give action:'displayNum' so when that button clicked event goes to the CalcController.js file.
When i pressed button named btnEight then i want to display digit 8 in textfield with the help of writing code in CalcController.js file instead of writing hander function in Main.js file. So how to do this?

Answer 1

Instead of defining Id for component , define Item Id
In Controller you have to define references in config.
config: {
refs: {
'idDisplay': 'main #idDisplay' // idDisplay is itemId not Id here
},
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
}
}
},
and in displayNum function write code like this.
displayNum: function(btn)
{
var display = this.getIdDisplay();
display.setValue(btn.getText());
}

Answer 2

I solved above my question as the following method:
Now my Main.js file is as following:
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',
}
]
}
});
and CalcController.js file is as following:
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('');
}
});
Using this method i pass my button's properties in the controller file using the button's tap event.