How to pass argument in Controller file using function in 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

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.