I am trying to edit my existing layout to move one of the east panels inside my viewport to an inner point. This tool didn't let me add attachments so I added the screenshot as a link. As you can see there is a "View/Edit Record" panel on the east. And that panel is not needed unless the user is within the "Reports" tab. So I tried to create another "border" layout under Reports tab. The east would be the "view/edit record" panel and there would be a center section. And under the center section would be the "report search" and "report summary" panels. However It doesn't show those panels anymore. I am sure it's something small I oversee but i spent hours to no avail. Any help would greatly be appreciated.

http://demo3.freightgate.com/~murat/...screenshot.jpg

and here is the code...

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.0 Transitional//EN"><!-- ACTION::: --><html>
<head>
	
 	<script type="text/javascript" src="/ext-js/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/ext-js/ext-all.js"></script>   
	
	<!-- Portal -->
	<script type="text/javascript" src="/ext-js/examples/ux/Portal.js"></script>
    <script type="text/javascript" src="/ext-js/examples/ux/PortalColumn.js"></script>
    <script type="text/javascript" src="/ext-js/examples/ux/Portlet.js"></script>
  
	<!-- Stylesheets -->
    <link rel="stylesheet" type="text/css" href="/ext-js/examples/menu/menus.css" />
    <link rel="stylesheet" type="text/css" href="/ext-js/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="/ext-js/examples/ux/css/Portal.css" />
    <link rel="stylesheet" type="text/css" href="/css/fgdemo.css" />
 
	<script type="text/javascript">

	var reportSearch;
	var viewEditPanel;
	var reportSummary;
	var reportTabPanel;
	var tabPanel;
	var favReportsTree;
	var allReportsTree;
	
	Ext.onReady(function(){
    	Ext.BLANK_IMAGE_URL = '/ext-js/resources/images/default/s.gif';
		Ext.QuickTips.init();
	
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
       
        
        var favReports = new Ext.Panel({
            title: 'Favorite Reports',
            contentEl:'favReports',
            iconCls:'favIcon',
            collapsible: true,
            cls:'empty'
        });
        
        var allReports = new Ext.Panel({
            title: 'All Reports',
            contentEl:'allReports',
			iconCls:'computerIcon',
			collapsible: true,
            cls:'empty'
        });

        var accordion = new Ext.Panel({
            region:'center',
            margins:'0 0 0 0',
            split:true,
            width: 210,
            layout:'form',
            items: [favReports, allReports]
        });
        
        viewEditPanel = new Ext.Panel({
                    region:'east',
                    contentEl:'viewEditRecord',
                    title: 'View/Edit Record',
                    collapsible: true,
                    split:true,
                    width: 350,
                    minSize: 175,
                    layout:'fit',
                    margins:'0 0 0 0'
        });
        
        reportSearch = new Ext.Panel({
            title: 'Report Search',
            contentEl:'reportSearch',
            iconCls:'reportSearchIcon',
            collapsible:'true'
        });

        reportSummary = new Ext.Panel({
            title: 'Report Summary',
            contentEl:'reportSummary',
            iconCls:'reportSummaryIcon',
            items: [],
            layout: 'anchor',
            autoHeight:true
        });

        reportPanel = new Ext.Panel({
        	region:'center',
            margins:'0 0 0 0',
            anchor: '-10 -10',
            layout:'anchor',
            title: 'Reports',
            items: [reportSearch, reportSummary]
        });
        
        reportTabPanel = new Ext.Panel({
        	region:'center',
            margins:'0 0 0 0',
            anchor: '-10 -10',
            layout:'border',
            title: 'Reports',
            items: [reportPanel, viewEditPanel]
        });
        
        
        	
		newsPanel = new Ext.Panel({
                    	contentEl:'news',
                    	title: 'News',
                    	autoScroll:true             
                    });
        
       
        vpadPanel = new Ext.Panel({
        	contentEl:'vpad',
        	title: 'VPAD',
        	autoScroll:true             
        });
        
        tabPanel = new Ext.TabPanel({
                    region:'center',
                    deferredRender:false,
                    activeTab:0,
                    items:[
                    vpadPanel,
                    newsPanel
                    , {
                    	contentEl:'reports',
                    	title: 'Reports',
                    	items: [reportTabPanel],
                    	autoScroll:true
                    }
                    , {
                    	contentEl:'howto',
                    	title: 'How To',
                    	autoScroll:true
                    }]
                });
            
      
       var statusPanel = new Ext.Panel({
                    region:'south',
                    split:true,
                    height:10,
                    margins:'0 0 0 0',
                    titlebar: true,
					split: true,
					animate: true,
					showPin: true
        });
       
       var viewport = new Ext.Viewport({
            layout:'border',
            items:[
                new Ext.BoxComponent({
                    region:'north',
                    el: 'north',
                    height:55
                }),
                	statusPanel
                ,{
                    region:'west',
                    title: 'Navigation',
                    collapsible: true,
                    split:true,
                    width: 225,
                    minSize: 175,
                    layout:'border',
	                items:[accordion]
                }
                ,
                
                tabPanel
             ]
        });
	    
    });
   
    
	
  </script>
</head>


	<!-- required for js scripts to work -->
	<div id="overDiv" style="position:absolute; visibility:hide; z-index:100;"></div>
	
	<div id="north" style="font-size: 16pt; color:white; font-weight: bold; background-image:url(/pltx_gui/resources/panel-title-bg.gif)">
		<div id="title"  style="height:30" >
			LPTX -- the smarter way to manage your information
		</div>
    	<div id="toolbar"></div>
	</div>
	
	<div id="dashboard">
	</div>
	
	<div id="vpad">
	</div>
	
	<div id="news">
	</div>
	
	<div id="reports">
	
		<div id="reportSearch" class="divFont">
			<br>Please select a report to load...<p>&nbsp;
		</div>
		
		<div id="reportSummary">
			<div id="gridSum"></div>
		</div>
	</div>
	
	<div id="howto">
		<h2>Step by step instructions (can be found in the tutorial)</h2>
		<p>&nbsp;</p>
	</div> 
	
	<div id="viewEditRecord" class="divFont">
	</div>	
	
	<div id="favReports" class="divFont">
		<div id="favReportsTree">
			<div id="favReportsTreeToolBar"></div>
		</div>
	</div>
	
	<div id="allReports" class="divFont">
		<div id="allReportsTree"></div>
	</div>
	
	<div id="additionalHTML" />
	
</body>

</html>