PDA

View Full Version : Can't get border layout to show correctly



vitolini
27 May 2010, 1:52 PM
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/images/screenshot.jpg

and here is the 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>