panel not showing sencha touch 2 - extjs

Question

I'm trying to switch panels when tapping 'login' in a toolbar.
My controller gets the event and I switch by adding and setting the active item to the panel I want.. however, the screen stays blank (and there are no debug errors).
This is the code of my panel, any idea what the mistake might be?
Ext.define('App.view.LoginView', {
extend: 'Ext.Panel',
xtype: 'loginpanel',
alias: 'widget.loginView',
fullscreen: true,
layout: 'fit',
items: [
{
xtype: 'TopToolBar'
},
{
xtype: 'formpanel',
items: [
{
xtype: 'fieldset',
title: 'Login',
instructions: 'Have a great day!',
items: [
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
},
{
xtype: 'button',
text: 'Login',
ui: 'confirm',
handler: function()
{
this.up('loginpanel').submit();
}
}
]
}]})
The code of my toolbar class:
Ext.define('App.view.TopToolBar', {
extend: 'Ext.Toolbar',
xtype: 'TopToolBar',
dock: 'top',
initialize: function() {
var loginButton = {
xtype: 'button',
text: 'Login',
ui: 'action',
handler: this.onLoginTap,
scope: this
};
this.add(loginButton);
},
onLoginTap: function(){
console.log('login tap');
this.fireEvent('loginBtnHandler', this);
}})

Answer 1

Define classes with Ext.define.
Ext.define('My.Toolbar', {
extend: 'Ext.Toolbar',
alias: 'widget.mytoolbar'
//configuration
});
Create(Instantiate) classes with Ext.create
var tlb= Ext.create('My.Toolbar', {
//configuration
});