call controller function

Question

I have a controller defined like this:

Ext.define('MyApp.controller.TestController', {
    extend: 'Ext.app.Controller',

    config: {

    },

    showTest: function() {
        alert('aaa');
    }

}); 

How can i call the showTest() function? I tried this: MyApp.controller.TestController.showTest();

But this doesn't work. Anyone any idea how to do this..?? Because i want to call that function from an onClick even in a div. Something like:

<div onclick="call.controller.func(1)">User 1</div>
<div onclick="call.controller.func(2)">User 2</div>
etc.

Answer 1

No, you are doing it wrong.

Suppose that you have a button in your view:

Ext.define('MyApp.view.Login', {
extend : 'Ext.form.Panel',
xtype  : 'myapp-login',

config : {
    items  : [
        {
            xtype   : 'fieldset',
            name    : 'login-fieldset',
            title   : 'Login credentials',
            instructions: 'Fill in your email and password)',
            items   : [
                {
                    xtype: 'emailfield',
                    name : 'email',
                    label: 'Email'
                },
                {
                    xtype: 'passwordfield',
                    name : 'password',
                    label: 'Password'
                }
            ]
        },
        {
            xtype : 'button',
            name  : 'Login',
            text  : 'Login',
            ui    : 'confirm'
        }
    ]
}
});

The in your controller, inside your control object:

control : {
   'myapp-login button[ui=confirm]' : {
      tap : 'showTest'
   }
},

// function showTest
showTest: function() {
    alert('aaa');
}

So in the above example: when user clicks inside the xtype called myapp-login the controller will execute the showTest() method.