Ext JS: hiding the main content area from a tab

Ext.onReady(function(){
	var tabPanel = Ext.getCmp("modx-resource-tabs");
    
	if(tabPanel!=null){
		//Add my custom tab
		var customTab = {
			title: 'Custom',
			id: 'my-custom-tab',
			cls: 'modx-resource-tab',
			layout: 'fit',
			labelAlign: 'top',
			labelSeparator: '',
			bodyCssClass: 'tab-panel-wrapper main-wrapper',
			autoHeight: true,
			defaults: {
				border: false,
				msgTarget: 'under',
				width: 400,
				height:800
			},
			items: [
                {
                    xtype: "box",
                    autoEl: {cn: '<div id="target_id"></div>'}
                }
			]
		};
        tabPanel.on('tabchange', function(parent,selectedTab){ 
            if (selectedTab.id == 'my-custom-tab') {
                Ext.getCmp("modx-resource-content").hide();
            }
            else {
                Ext.getCmp("modx-resource-content").show();
            }
        });
		tabPanel.insert(0, customTab);
		tabPanel.setActiveTab(0);
		tabPanel.doLayout();
	}
});