All of the code I have worked on before has been spaghetti and no structure to it. Today I am working on an app that I want to structure a little better. First I have a main application.js that is the main entry point for my app and controls the layout. Here we create a tab layout that also has a title bar for our application. The 3 custom components A,B,C in the items array are our custom components (or views).

Code:
Ext.ns("vega","vega.ui");

Ext.setup({
    tabletStartupScreen: 'assets/images/tablet_startup.png',
    phoneStartupScreen: 'assets/images/phone_startup.png',
    icon: 'assets/images/icon.png',
    glossOnIcon: false,
    onReady: function() {
		
		var titlebar = new Ext.Toolbar({
			id:'app-titlebar',
			dock:'top'
		});
		
		var tp = new Ext.TabPanel({
			fullscreen:true,
			ui:'light',
			dockedItems:[titlebar],
			animation:{
				type:'slide',
				cover:true
			},
			tabBar: {
				centered:true,
				dock:'bottom',
				layout: {pack:'center'}
			},
			defaults:{
				scroll:'vertical'
			},
			listeners: {
				afterlayout : function() {
					titlebar.setTitle(this.layout.activeItem.title);
				},
				cardswitch: function(card) {
					titlebar.setTitle(card.title);
				},
				afterrender : function(){
					// load the schedule data for today
				}
			},				
			items:[
				{
					xtype:'componenta',
					iconCls:'time',
					tb:titlebar	
				},
				{
					xtype:'componentb',
					iconCls:'bookmarks'	
				},
				{
					xtype:'componentc',
					iconCls:'user'	
				}								
			]
		});
		
    }
});
Component A looks like this
Code:
vega.ui.ComponentA = Ext.extend(Ext.Panel, {
    fullscreen: true,
 	title: 'Component A',
	
    initComponent: function(){		
        vega.ui.ComponentA.superclass.initComponent.apply(this, arguments);
				
    },
	
	onRender: function(){
		vega.ui.ComponentA.superclass.onRender.apply(this,arguments);		
	}
	
});
// register xtype to allow for lazy initialization
Ext.reg('componenta', vega.ui.ComponentA)


Now for B I need the ability to add a button to the toolbar. The only way I could see to do this is by getting the toolbar and adding a new button. The problem with this is the initComponent method is run right away so it ends up adding it to the toolbar for all of our screens.

Code:
vega.ui.ComponentB = Ext.extend(Ext.Panel, {
    fullscreen: true,
 	title: 'Component B',
	
    initComponent: function(){

		var titlebar = Ext.getCmp('app-titlebar');
		
		titlebar.add({
			xtype:'button',
			text:'back',
			handler:function(){
				alert("back");
			}
		});

        vega.ui.ComponentB.superclass.initComponent.apply(this, arguments);		
    }
	
});
 
// register xtype to allow for lazy initialization
Ext.reg('componentb', vega.ui.ComponentB);
I thought it would make sense to use activate / deactivate method listeners for the component but those events are not running?

How would you go about handling this logic in the Component ?