PDA

View Full Version : BorderLayout display problem



dodgie
15 Oct 2007, 6:05 AM
Hi,

I'm having problems with my BorderLayout, I have two ContentPanels which I have added to my 'west' region but the two tabs disappear below the browser so I have to scroll down to view them. Can anyone tell me what I'm doing wrong here?

Here's my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>

<!-- Include YUI utilities and Ext: -->
<script type="text/javascript" src="ext-1.1/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="ext-1.1/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="ext-1.1/ext-all-debug.js"></script>
<script type="text/javascript" src="LayoutTest.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="ext-1.1/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ext-1.1/resources/css/xtheme-vista.css">
<link rel="stylesheet" type="text/css" href="ExtTest.css">
</head>
<body>
<div id="westone" style="overflow: hidden; width: 100%; height: 100%;border:0px solid #999;margin:0px 0px;visibility:hidden;"></div>
<div id="westtwo" style="overflow: hidden; width: 100%; height: 100%;border:0px solid #999;margin:0px 0px;visibility:hidden;"></div>
<div id="center" style="overflow: hidden; width: 100%; height: 100%;border:0px solid #999;margin:0px 0px;visibility:hidden;"></div>
</body>
</html>


and


Ext.onReady(function() {
// Main Layout code
var mainLayout = new Ext.BorderLayout(document.body,{
west: { split: true,
initialSize: 250,
collapsible: true,
animate: true,
titlebar: true,
minSize: 100,
maxSize: 400
},
center: { autoScroll: true
}
});
mainLayout.beginUpdate();
mainLayout.add('west', new Ext.ContentPanel(Ext.get("westone"), {title: 'West 1', fitToFrame: true, closable: false, autoScroll: true}));
mainLayout.add('west', new Ext.ContentPanel(Ext.get("westtwo"), {title: 'West 2', fitToFrame: true, closable: false, autoScroll: true}));
mainLayout.add('center', new Ext.ContentPanel(Ext.get("center"), {title: 'Center', fitToFrame: true, closable: false, autoScroll: true}));
mainLayout.endUpdate();
});

TIA

Rich