ViewControllers - Can we use ext5 references in listen{}?

Hello,

TLDR - Is there a way to use the ExtJS5 "reference" I set on my components to the map functions from inside my ViewController?

In ExtJS4 I liked to keep all event listeners out of my views and in the controller. I felt it was neater to let the views only worry about layout and component generation and then let the controller act as the mapper for views to events.

Below is the example code from the ExtJS5 API about mapping components to functions:

Code:

Ext.define('User', {   extend: 'Ext.data.Model',
   fields: ['name', 'phone']    
});


Ext.define('UserListController', {
    extend : 'Ext.app.ViewController',
    alias: 'controller.userlist',


    init: function() {
        this.userCount = 0;
        var users = [],
            i;


        for (i = 0; i < 5; ++i) {
            users.push(this.getUser());
        }  
        this.getView().getStore().add(users);
    },


    onAddClick: function() {
        this.addUser();
    },


    onDeleteClick: function() {
        var view = this.getView(),
            selected = view.getSelectionModel().getSelection()[0],
            store = view.getStore();


        store.remove(selected);
    },


    onSelectionChange: function(selModel, selections) {
        this.lookupReference('delete').setDisabled(selections.length === 0);
    },


    getUser: function() {
        ++this.userCount;
        return {
            name: 'User ' + this.userCount,
            phone: this.generatePhone()
        };
    },


    addUser: function() {
        this.getView().getStore().add(this.getUser());    
    },


    generatePhone: function() {
        var num = '',
            i;


        for (i = 0; i < 7; ++i) {
            num += Ext.Number.randomInt(0, 9);
            if (num.length === 3) {
                num += '-';
            }
        }    
        return num;
    }
});


Ext.define('UserList', {
    extend: 'Ext.grid.Panel',
    controller: 'userlist',


    tbar: [{
        text: 'Add',
 // TRYING TO AVOID
        listeners: {
            click: 'onAddClick'
        }    
    }, {
        text: 'Delete',
        reference: 'delete',
 // TRYING TO AVOID
        listeners: {
            click: 'onDeleteClick'
        }
    }],
    store: {
        model: 'User'
    },
    selModel: {
        type: 'rowmodel',
 // TRYING TO AVOID
        listeners: {
            selectionchange: 'onSelectionChange'
        }    
    },
    columns: [{
        flex: 1,
        dataIndex: 'name',
        text: 'Name'
    }, {
        flex: 1,
        dataIndex: 'phone',
        text: 'Phone'
    }]
});


Ext.onReady(function() {
    new UserList({
        renderTo: Ext.getBody(),
        width: 400,
        height: 200
    });
});

I recognize I can still use ComponentQuery selector notation in the ViewController's component{} or store{} to map a listener to a component, however then it seems I'm no longer properly making use of what the ViewController has to offer as described in the ExtJS5 Getting Started notes on ViewController Encapsulation.

Is there a way to use the ExtJS5 "reference" I set on my components to the map functions from inside my ViewController?

Code:

Ext.define('User', {   extend: 'Ext.data.Model',
   fields: ['name', 'phone']    
});


Ext.define('UserListController', {
    extend : 'Ext.app.ViewController',
    alias: 'controller.userlist',
  
    config: {        listen: {            
            component: {
                'refGoesHere': {
                   click: function() {
                       alert('clicked round details button');
                   }
                },
                '#userGrid': { // something like this??
                    selectionchange: 'onSelectionChange'
                }
            }
        }
    },

    init: function() {
        this.userCount = 0;
        var users = [],
            i;


        for (i = 0; i < 5; ++i) {
            users.push(this.getUser());
        }  
        this.getView().getStore().add(users);
    },


    onAddClick: function() {
        this.addUser();
    },


    onDeleteClick: function() {
        var view = this.getView(),
            selected = view.getSelectionModel().getSelection()[0],
            store = view.getStore();


        store.remove(selected);
    },


    onSelectionChange: function(selModel, selections) {
        this.lookupReference('delete').setDisabled(selections.length === 0);
    },


    getUser: function() {
        ++this.userCount;
        return {
            name: 'User ' + this.userCount,
            phone: this.generatePhone()
        };
    },


    addUser: function() {
        this.getView().getStore().add(this.getUser());    
    },


    generatePhone: function() {
        var num = '',
            i;


        for (i = 0; i < 7; ++i) {
            num += Ext.Number.randomInt(0, 9);
            if (num.length === 3) {
                num += '-';
            }
        }    
        return num;
    }
});


Ext.define('UserList', {
    extend: 'Ext.grid.Panel',
    controller: 'userlist',
reference: 'userGrid'

    tbar: [{
        text: 'Add'
    }, {
        text: 'Delete',
        reference: 'delete'
    }],
    store: {
        model: 'User'
    },
    selModel: {
        type: 'rowmodel'
    },
    columns: [{
        flex: 1,
        dataIndex: 'name',
        text: 'Name'
    }, {
        flex: 1,
        dataIndex: 'phone',
        text: 'Phone'
    }]
});


Ext.onReady(function() {
    new UserList({
        renderTo: Ext.getBody(),
        width: 400,
        height: 200
    });
});

Thanks in advance.