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.