extjs 4 error when attempting to use view - extjs

Question

Using extjs 4 I get an error when attempting to use a view in my viewport. I think it is an issue with how the view is defined/where it is included. However, I can';t find what I've done wrong. I know this is an easy mistake, I just don't see it. I'll post the code below. Error is
TypeError: name is undefined
View I want to use:
Ext.define('MC.view.SideBar', {
extend: 'Ext.Container',
alias: 'widget.SideBar',
items:[
{ xtype: 'panel',
bodyPadding: 5,
html:'facebook'
},
{ xtype: 'panel',
bodyPadding: 5,
html:'twitter?'
}
]
//... more configuration ...
});
Viewport
Ext.create('Ext.container.Viewport', {
layout: {
//align:'center',
pack:'center',
type:'hbox',
align:'stretch',
border:true
},
items: [
{xtype:'panel',
layout:{
type:'vbox',
align:'stretch',
pack:'start'
},
border:true,
width: '80%',
items:[
{xtype:'panel',
border:true,
flex:2,
//width:'100%',
html:'toolbar/logo'
},
{xtype:'panel',
border:true,
flex:8,
layout:{
type:'hbox',
align:'stretch',
pack:'start'
},
items: [
//{xtype:'SideBar'},
**{xtype:'SideBar',**
flex:22,
height:'100%'
},
{xtype:'panel',
flex:88,
height:'100%'
}
],
html:'lower'
}
]
}
]
});
Controller where views are referenced
Ext.define('MC.controller.Monolith', {
extend: 'Ext.app.Controller',
views: [
'TopBar', 'SideBar'
],
init: function() {
console.log('Initialized Monolith controller! This happens before the Application launch function is called');
}
});
Finally the application file
Ext.application({
name: 'MC',
//appFolder: 'app',
autoCreateViewport: true,
controllers: [
'Monolith'
],
//models: [],
//stores: [],
launch: function() {
console.log('mesacart');
// This is fired as soon as the page is ready
}
});
I've tried everything I can think of, but it must be simple since there isnt much code here yet....

Answer 1

For views and controllers you don't need to specify their 'MC.controller' and 'MC.view' prefix when declaring them.
So you end up with:
views: [
'TopBar', 'SideBar'
],
and so on.
EDIT:
when you ask to auto create the viewport you need to define a viewport class as MC.view.Viewport
See your full code example in jsfiddle:
http://jsfiddle.net/dbrin/qW4hR/
Ext.define('MC.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: {...}