How to attach handlers to ViewController functions

Hi,

I am trying out SA3, pretty impressed so far. Just getting my head around the new concepts having come from ExtJS 4 and SA2.

I see from the ExtJS 5 docs the introduction of ViewControllers and understand how these work from the examples. But I am having problems assigning a named function on a ViewController in my project to a button I have in my UI.

I have a Window with a toolbar:

Code:

dockedItems: [
        {
            xtype: 'toolbar',
            dock: 'bottom',
            items: [
                {
                    xtype: 'tbfill'
                },
                {
                    xtype: 'button',
                    handler: function(button, e) {

                    },
                    text: 'Login'
                }
            ]
        }
    ]

And my ViewController:

Code:

Ext.define('PP4.view.LoginWindowViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.loginwindow',

    onLoginClick: function() {

    }

});

I cannot assign a string name to the handler property of the button instead it just creates a function handler, but the ExtJS 5 guides give examples where you can use a named function from the ViewController associated, e.g.:

Code:

Ext.define('MyApp.view.foo.Foo', {
    extend: 'Ext.panel.Panel',
    xtype: 'foo',
    controller: 'foo',

    tbar: [{
        xtype: 'button',
        text: 'Add',
        handler: 'onAdd'
    }],

    items: [{
        xtype: 'grid',
        ...
    }]
});

Ext.define('MyApp.view.foo.FooController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.foo',

    onAdd: function () {
        // ... get the grid and add a record ...
    }
});

How do I achieve this in Architect?

Thanks



How to attach handlers to ViewController functions