Ext-JS 4 border layout inside card layout

[dlozic128]

I am creating an application with Ext-JS 4.
Cards:
1.) Login card
2.) Application card
Application card has a border layout.
When I show them separately, they work but when I put them in a Viewport together, they don't work.
Here is my Viewport:

Ext.define('MyApp.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'card',

    items: [
        {
            xtype: 'loginform',
        },
        {
            xtype: 'mainapp'
        }
    ]
});

Here is a part of my Login card:

Ext.define('Sabrina.view.login.Form' ,{
    extend: 'Ext.form.FormPanel',
    alias : 'widget.loginform',

    name: 'loginform',
    frame: true,
    title: 'Login',
    bodyPadding: '5px 5px 0',
    width: 350,
    ...

Here is a part of my Application card:

Ext.define('Sabrina.view.Main', {
    extend: 'Ext.panel.Panel',
    alias: ['widget.mainapp'],
    layout: 'border',
        items: [
          //here I have 'west' and 'center' regions
        ]

I've created the same components in a different application separately and they work but here not. Do I have to put something more if I want a border layout inside card layout?
I'm getting this:

Uncaught TypeError: Cannot call method 'substring' of undefined

Thank you.

[scottmartin]

You are trying to access a type that is not available. Please check the following:

You have requires:[] where needed
That you have not use the wrong case when accessing a type 'loginForm' instead of 'loginform'
Use ext-dev.js instead of ext.js to display warnings in your console about possible problems.

Scott.

[dlozic128]

Finally... Someone with a great answer!

I'll try it and if this is the case, I'll mark this as "accepted" answer.

Thank you @scottmartin.