Panel with borderLayout fill it's parent body - extjs4.1

Question

I want to add panel to one of tabs of tabPanel, I use border layout for panel but when i add panel to tab it can't fill it's parent body.
panel code:
var viewport = Ext.create('Ext.panel.Panel', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true,
anchor:'100%'
},
id:'viewPort',
width:600,
height:600,
items: [{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '17%',
minWidth: 100,
minHeight: 140,
layout:{
type:'vbox',
align:'stretch'
},
items: [show,treePanel,propGrid]
},tabs]
});
tab code that is parent of panel and when user click on it panel loaded to it dynamically:
var mainTabs = Ext.create('Ext.tab.Panel', {
layout: 'anchor',
id:'mtabs',
defaults: {
split: true,
anchor: '100%'
},
items: [{
title: 'Layout Window',
closeAction: 'hide',
layout: {
type: 'border',
padding: 5
},
//anchor: '100%',
width:600,
height:600,
listeners: {
activate:function (tab) {
}
},
items: [{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '17%',
minWidth: 100,
minHeight: 140,
layout:'vbox',
items: [historyTreePanel,propGrid]
},tabs]
},{
title: 'History',
//xtype:'panel',
width:2000,
height:1024,
html: 'Please Wait...',
id:'history-tab',
layout:'fit',
layout: 'hbox',
default: {
anchor:'100%'
},
//iconCls: 'favorites',
//cls: 'card1',
listeners: {
activate:function (tab) {
if(!flag){
flag = true;
$.getScript("/FleetManagement/js/history/fleethistory.js", function(data, textStatus, jqxhr) {
Ext.getCmp('history-tab').add(viewport);
});
}
}
}
}],
renderTo : Ext.getBody()
});
});
in the above code tab with id:'history-tab' is my mentioned tab.How can i fix this problem?

Answer 1

It seems your code missing some of the components. Your tab should have correct layout. Sample code. jsfiddle example here . Hope this helps
Ext.onReady(function() { var resultsPanel = Ext.create('Ext.Panel',{
frame:false,
border:false,
collapsible:false,
title:'tab main',
layout:'border',
items:[{
region: 'center',
id:'centerPanel',
title:'center',
xtype:'panel',
layout:'fit',
border: true,
items:[{id:'grid',xtype:'panel'}]
},
{
region: 'west',
id:'westPanel',
title:'facets',
xtype:'panel',
width:'15%',
collapseMode: 'mini',
collapsible:true,
autoScroll: true,
border: false,
baseCls:'x-plain',
split: true ,
items:[{id:'facet',xtype:'panel'}]
}
]
}); var subtab = { xtype:'tabpanel',
title:'moretabs',
activeTab: 0,//tabActive,
closable:true,
border:false,
id:'idd',
items: [{border:false,layout: 'fit',cls: 'inner-tab-custom', autoShow:true, id:'sub1-',title: 'nested1',items:[resultsPanel]}] };
var tabPanel = Ext.create('Ext.tab.Panel', {
layout:'fit',
height:200,
msgDisplay: 'block',
//deferredRender:false,
border:false,
items: [subtab]
}).render(Ext.getBody());
});