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:
Code:
var viewport = Ext.create('Ext.panel.Panel', {    layout: {
    type: 'border',
    padding: 5
    },
defaults: {
    split: true,
    anchor:'100%'
    },
id:'viewPort',
width:1200,
height:750,
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:
Code:
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) {
            var historyTab = Ext.getCmp('history-tab');
            historyTab.add(viewport);
            historyTab.doLayout();
        });
}
}
}
}],
renderTo : Ext.getBody()
});
});

in the above code tab with id:'history-tab' is my mentioned tab.How can i fix this problem?
Untitled.jpg