How to combine extjs models to show informations in a grid

Question

im struggeling a little bit with Model references in extjs (6.2.1) and to show combined informations of 2 models in a grid.

I have Grid like this:

Ext.define('App.view.user.UserGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'usergrid',
    itemid: 'UserGrid',

    requires: [
         'Ext.grid.column.Action',
         'Ext.toolbar.Paging',
        'App.store.Users'
    ],

    controller: 'usergrid',
    viewModel: 'usergrid',
    store: {},

    columnLines: true,

    bind: {
        selection: '{theRow}',
        store: '{accounts}'
    },

    columns: [
        {
            xtype: 'rownumberer'
        }, {
            text: 'UserId',
            flex: 1,
            dataIndex: 'userId',
            align: 'left'

        }, {
            text: 'username',
            flex: 1,
            dataIndex: 'userName',
            align: 'left'
        }, {
            text: 'firstname',
            flex: 1,
            dataIndex: 'userId',
            align: 'left',
            /*renderer:function(deptId){
                var userStore = App.app.getStore("Users");
                var user = App.getById(deptId);
                return user.get('firstname');
            }*/
        }, {
            text: 'surname',
            flex: 1,
            dataIndex: 'userId.surname',
            align: 'left'
        }, {
            text: 'E-Mail',
            width: 120,
            dataIndex: 'emailAddress'
        }
    ]
});

And 2 Models an Account:

Ext.define('App.model.Account',{
    extend:'Ext.data.Model',

    require: [
        'App.model.User'
    ],

    fields:[
        {
            name: 'id',
            type: 'int'
        }, {
            name: 'userId',
            type: 'int',
            reference: {
                type: 'User'
            }
        }, {
            name: 'userName',
            type: 'string'
        }, {
            name: 'emailAddress',
            type: 'string'
        }
    ],

    idProperty: 'id',

    proxy: {
        type: 'rest',
        reader: {
            type: 'json'
        },
        url: 'App/Account/'
    }
});

that can have User(s)

Ext.define('App.model.User',{
    extend:'Ext.data.Model',
    fields:[
        {
            name: 'id'
        }, {
            name: 'firstname'
        }, {
            name: 'surname'
        }
    ],

    idProperty: 'id',

    proxy: {
        type: 'rest',
        reader: {
            type: 'json'
        },
        url: 'App/User/'
    }
});

Last part is the Viewmodel that looks like this:

Ext.define('App.view.user.UserGridViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.usergrid',
    requires: ['App.store.Accounts'],

    data:{
        rec:null
    },

    stores: {
        accounts: {
            type: 'accounts',
            model: 'App.model.Account'
        }
    }
});

The store using in this example is just a simple store with model and storeId nothing special. Both user- and account-store load their data from server in HAL-Format and this API is fix (only userId in Account).

The account-store is filled and the account-informations are displayed in the grid. But when it comes to user-informations nothing happend. When using a breakpoint in renderer-function to evaluate the scope, i get an account but there is no route, method, attribute (what ever) to the corresponding user.

Whats the way to get these user-informations or to link these two models in the correct way? Maybe i have to change my viewmodel and combine the informations there. Many examples i've found are from extjs 4, or without viewmodels (binding), or grids, etc.