I want to load panel via ajax to one of tabPanel tabs in my web app, I do it by means of below code

Code:
var mainTabs = Ext.create('Ext.tab.Panel', {
        layout: 'card',
        defaults: {
            split: true
        },
        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,
                items: [historyTreePanel,propGrid]
            },tabs]
        },{
            title: 'History',
            //xtype:'panel',
            html: 'Please Wait...',
            id:'history-tab',
            layout:'anchor',
            default: {
                anchor:'100%'
            },
            //iconCls: 'favorites',
            //cls: 'card1',
            listeners: {
                activate:function (tab) {
                }
            },
            loader: {
                scripts: true,
                autoLoad :true,
                contentType: 'html',
                failure : function(){
                    alert('failed');
                },
                url: '<?php echo Yii::app()->createUrl('history');?>'


            }
        }],
        renderTo : Ext.getBody()
    });

In the above code i load panel to tab by means of loader. Panel that should be added to 2nd tab is

Code:
var viewport = Ext.create('Ext.panel.Panel', {
                layout: {
                    type: 'border',
                    padding: 5
                },
                defaults: {
                    split: true,
                    anchor:'100%'
                },
                width:1024,
                height:600,
                items: [{
                    region: 'west',
                    collapsible: true,
                    title: 'Starts at width 30%',
                    split: true,
                    width: '17%',
                    minWidth: 100,
                    minHeight: 140,
                    items: [show,treePanel,propGrid]
                },tabs],
                renderTo:Ext.getBody()
            });

In the above code i use renderTo:Ext.gerBody() when i click on 2nd tab i can see panel in 2nd tab but it can't fill it's parent 2nd tab. After when i click 1st tab i see two panel in the window, i see 2nd tab panel below 1st tab panel. this problem showed in below picture
panels.jpg

other problem is that panel can't fill it's parent.
panel.jpgHow can i fix these problems?