PDA

View Full Version : Layout Manager



Animal
3 Nov 2006, 2:15 AM
I'm getting to grips with this concept.

I want a Layout to take place inside my "content" div or any other container element.

I want a collapsible north with a splitter. This will contain a Grid, and on select of a row, the centre will load a preview.

I'm just getting the layout code together, but I'm a bit lost. When in the "content" div, tt's making the whole thing a bit too high which is causing a scoll bar. It's sizing the Layout to the page. I want the layout in the content div (sized to match the page).

This ListManager objectwill have to create this layout in any container. Right now, it's in the main content area, but it could be in a BasicDialog (I'm moving away from heavyweight YUI stuff)

When I collapse the north panel ("The List"), its title disappears.

I have:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="css/Aspicio.css">
<script type="text/javascript" src="js/yahoo.js"></script>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/dom.js"></script>
<script type="text/javascript" src="js/logger.js"></script>
<script type="text/javascript" src="js/connection.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
<script type="text/javascript" src="js/dragdrop.js"></script>
<script type="text/javascript" src="js/container.js"></script>
<script type="text/javascript" src="js/yui-ext.js"></script>
<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function()
{
new ListManager(
{
container:"content"
});

var fooEl = YAHOO.ext.DomHelper.append(document.body,
{
tag:"div",
id:"foo"
});

var foo = new YAHOO.ext.BasicDialog(fooEl,
{
height:400,
width:600
});
foo.show();
new ListManager(
{
container:foo
});

});

function ListManager(config)
{
this.container = YAHOO.ext.Element.get(config.container);
YAHOO.ext.DomHelper.append(this.container.dom,
{
tag:"div",
cls:"ylayout-inactive-content",
id:"listPanel"
});
YAHOO.ext.DomHelper.append(this.container.dom,
{
tag:"div",
cls:"ylayout-inactive-content",
id:"formPanel"
});
this.layout = new YAHOO.ext.BorderLayout(this.container,
{
north: {
split:true,
initialSize: 400,
titlebar: true,
collapsible: true,
minSize: 100,
autoScroll: false
},
center: {
titlebar:true,
autoScroll: false
}
});
this.layout.beginUpdate();
this.listPanel = new YAHOO.ext.ContentPanel("listPanel",
{
title:"The List",
fitToFrame:true
});
this.formPanel = new YAHOO.ext.ContentPanel("formPanel",
{
title:"The Form",
fitToFrame:true,
url:"form/CountrySubEntity.jsp"
});
this.layout.add("north", this.listPanel);
this.layout.add("center", this.formPanel);
this.layout.endUpdate();
}
</script>
<title>Test</title>
</head>
<body>
<div id="header" style="background-color:blue;color:white;font-size:200%;text-align:center">
The Title!
</div>
<div id="content">
</div>
</body>
</html>


Any hints?

jack.slocum
3 Nov 2006, 12:24 PM
Hmmm... it's tough to guess, but the first thing I would try is adding position relative to the container div. This may be done automatically though, but just in case it can't hurt.