fit mapPanel in tabPanel - extjs

Question

I use extjs4.1 with geoext2 in my web app.
I want to load mapPanel to tabPanel via ajax and it fill tabPanel height and width.
If i set mapPanel height and width i can see it in tabPanel but it can't fill tabPanel because i set it height and width.Following code:
mapPanel = Ext.create("GeoExt.panel.Map", {
renderTo: "mappanel",
height: 575,
width: 1124,
map:map,
zoom: 11,
tbar : toolbar
});
var tabs = Ext.create('Ext.tab.Panel', {
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
title: 'History',
autoScroll: true
}, {
title: 'Center Panel',
autoScroll: true
}]
});
I insert MapPanel to tabPanel when user click on grid column that has icon via following code.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columnLines: true,
columns: [
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 20,
items: [{
icon : '<?php echo Yii::app()->baseUrl.'/images/icons/show.png';?>',
tooltip: 'Show Map',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
var jsonData = Ext.encode(store.proxy.reader.jsonData);
tabs.remove(tabs.getComponent(2));
tabs.insert(2,{
title:'Map',
layout: 'fit',
loader: {
scripts: true,
autoLoad :true,
params:{
history:jsonData,
index:rowIndex
},
failure : function(){
alert('failed');
},
url: '<?php echo Yii::app()->createUrl('MapWidget/HistoryMap');?>'
}
});
tabs.setActiveTab(2);
tabs.doLayout();
}
}]
},
...
But when i clean height and width in mapPanel options i can't see it in tabPanel!
How can i load mapPanel to tabPanel to fill it's content?

Answer 1

From the docs
Do not use this option if the Component is to be a child item of a
Container. It is the responsibility of the Container's layout manager
to render and manage its child items.
Here's some example code for loading components remotely in the correct way: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/component-loader/component-loader.html