EXTJS - Components

I want to segregate components MVC Style. E.g i have three panels in VBox Layout the topmost one being a toolbar with menu's. Each toolbar item would have its own menus like below. Idea is to have a homeLayout.js ( that contains panels in VBox Layout), mytoolbar.js ( containing toolbars) , rVitesMenu.js() . All should be seperate JS files for better segregation. but it doesnt seem to work

--homeLayout

Ext.define('rVites.view.home.homeLayout', {

extend: 'Ext.Panel',

alias: 'widget.homeLayout',

width: '100%',

height: '100%',

layout: {

type: 'vbox',

align: 'center'

},

renderTo: document.body,

items: [{

xtype: 'panel',

width: '75%',

flex: .50,

bodyStyle: { "background-color": "#82CAFF" },

tbar: myToolBar

}, {

xtype: 'panel',

html: 'Search Panel',

width: '75%',

flex: 2

},{

xtype: 'panel',

html: 'Content Panel',

width: '75%',

flex: 6

}],

...

var rVitesmenu = Ext.create('Ext.menu.Menu', {

id: 'rVitesMenu',

style: {

overflow: 'visible' // For the Combo popup

},

items: [{

text: 'Create',

}, {

text: 'Most Popular',

}, {

text: 'Most Recommended',

}

]

});

,,,

var myToolBar = Ext.create('Ext.toolbar.Toolbar', {

width: 500,

height: 42,

style:'font-family:verdana;font-size:14',

items: [

{ xtype: 'tbspacer' }, {

xtype: 'tbspacer', width: 50

}, {

//xtype: 'splitbutton',

text: 'rVites',

menu: rVitesmenu // assign menu by instance

}