There was a related question: http://www.sencha.com/forum/showthre...p-with-Toolbar
It was advised to create a wrapping component with toolbar. I have the same issue, but I need to put them inside another component.
So I want a map with top and bottom bars. I do the following:
1) Controller. I have my views in app/view/search/
Here I just include them. We actually need only MapPage now
Code:
Ext.define('CJ.controller.Search', {
	extend: 'Ext.app.Controller',
	views: [
		'search.MapPage',
		'search.ListViewPage',
		'search.FilterPage'
	],
.....
2) MapPage. Basically it holds a global toolbar for the page docked to the top and a custom map control as a single item of a page for now.
Code:
Ext.define('CJ.view.search.MapPage', {
	extend: 'CJ.view.Page',
	alias: 'widget.searchMapPage',
	requires: ['CJ.view.search.MapPanel',//requiring MapPanel, the custom map control
'CJ.view.search.Map'], //and the extended map itself, I'll be adding some marker rendering logic there
	config: {
		layout: 'fit',
		items: [
			{
				xtype: 'toolbar',
				items: [
					{
						xtype: 'spacer'
					},
					{
						xtype: 'navButtonNavigate',
						text: CJ.t('Filter list view'),
						ui: 'round',
						page: 'searchFilterPage'
					}
				],
				docked: 'top'
			},
			{
				xtype: 'mapcontrol'
			}
		]
	}
});
3) MapPanel. Component that holds the map and top/bottom bars:
Code:
Ext.define('CJ.view.search.MapPanel', {
	extend: 'Ext.Panel',
	alias: 'widget.mapcontrol',
	requires: ['CJ.view.search.Map'],//this is extended map control
	layout: 'fit',
	config: {
		items: [
			{
				xtype: 'panel',
				html: '€ 30.00 Electronic',
//				height: 50,
				ref: 'dealDetail',
				docked: 'top'
			},
			{
				xtype: 'searchMap',
				ref: 'map'
			},
			{
				xtype: 'panel',
				html: 'Falcon street 25, 81541 Munchen',
				docked: 'bottom'
			}
		]
	}
});
4) Map control. Nothing special, just extension for now.
Code:
Ext.define('CJ.view.search.Map', {
	extend: 'Ext.Map',
	alias:'widget.searchMap',
	config: {
		useCurrentLocation: true
	}
});
The main problem is that layout:fit does not set correct height for the innermost map component. I could not find what the problems is, but now it simply does not show anything in the panel. Top and bottom bars are in their places. The DIV for the map (created by layout) is there, dimensions are correct.
I did the hack now to make it work (MapPanel):
Code:
constructor: function () {

	this.callParent(arguments);
	this.on('painted', this.fixMap, this);
},
fixMap: function(){
	this.map = this.down('[ref=map]');
	this.map.setHeight(this.getEl().down('.x-body').getHeight()); //dirty hack! TODO: fix this
}
This does the job, but it's not the full solution: I need to handle resize, destroy etc. This also degrades performance a bit.

How can this be fixed correctly? Is the deep component nesting a problem here?