Grid widget not working - Ext JS

Grid widget not working - Ext JS

So I have a grid class that I am defining here:
Ext.define('MC.view.portal.MetadataWidget', {
extend: 'Ext.grid.Panel',
id: 'metadatawid',
title: 'Graph',
store: Ext.data.StoreManager.lookup('metadatastore'),
alias: 'widget.metadatawidget',
initComponent: function() {
this.columns = [
{header: 'KBE Name', dataIndex: 'KBE_NAME', flex: 3, tdCls:
'grid_cell'},
...//remaining rows
];
this.callParent(arguments);
}
});
And I am trying to define it in my app.js using it's alias:
Ext.create('Ext.panel.Panel', {
id: 'app_container',
width: '100%',
height: 1000,
renderTo: 'container',
layout: 'hbox',
border: false,
requires: [ 'MC.view.portal.MetadataWidget' ],
items: [
{ xtype: 'metadatawidget', height: 400, width: ...
However I'm getting this error:
TypeError: name is undefined
if (name === from || name.substring(0, from.length) === from) {
Besides implementing a controller, this is basically following the same
way they define a widget in the Sencha docks, but I cannot find the reason
for my error. Any ideas?
-the store works
-directories are fine
-creating the widget causes the trouble
Cheers!