[Dojo-interest] LayoutContainer example?

Adrian Hall adrianhall at mirapoint.com
Mon Jan 22 16:54:46 MST 2007


Does anyone have a bare bones example of creating a layout programmatically,
or can see where I am going wrong below?

 

I have boiled this down to a simple problem.  Here is my HTML file:

 

<html>

 <head>

  <script type="text/javascript" src="js/dojo/dojo.js"></script>

  <script type="text/javascript">

dojo.require("dojo.widget.LayoutContainer");

dojo.require("dojo.widget.ContentPane");

 

function div(id)

{

 var d = document.createElement("div");

 d.id = id;

 return d;

}

 

function appInit()

{

 var mainScreen = dojo.byId("mainScreen");

 

 var menuBar = div("menuBar");

 var menuBarWidget = dojo.widget.createWidget(

  "ContentPane", { layoutAlign: "top" }, menuBar);

 mainScreen.appendChild(menuBarWidget.domNode);

 

 var statusBar = div("statusBar");

 var statusBarWidget = dojo.widget.createWidget(

  "ContentPane", { layoutAlign: "bottom" }, statusBar);

 mainScreen.appendChild(statusBarWidget.domNode);

 

 var clientArea = div("clientArea");

 var clientAreaWidget = dojo.widget.createWidget(

  "ContentPane", { layoutAlign: "client" }, clientArea);

 mainScreen.appendChild(clientAreaWidget.domNode);

 

  </script>

  <style type="text/css">

html, body, #mainScreen {

  width: 100%; height: 100%; overflow: hidden; margin: 0 0 0 0; padding: 0 0
0 0;

}

#menuBar {

  background-color: red; height: 20px; overflow: hidden;

}

#statusBar {

 Background-color: blue; height: 20px; overflow: hidden;

}

#clientArea {

 border: 1px solid green;

 Overflow: auto;

}

  </style>

 </head>

 <body>

  <div id="mainScreen" dojoType="LayoutContainer"
layoutChildPriority="top-bottom">

  </div>

 </body>

</html>

 

What I am expecting, based on the layout, is my browser window has a 20px
high red bar at the top of the window, and a 20px blue bar at the bottom of
the window, with all the space in between these bars surrounded by a green
border.

 

What I get is a 20px red bar at the top, a 20px blue bar directly under it,
then a green line (obviously a zero-height area surrounded in a green
border).

 

Browser is firefox 2.0 on Linux, which tends to be pretty standards based in
my experience.  I've produced the above with just the demos and the manual
so far, since I didn't see many examples of programmatically producing a
layout - either in the archives (which I am still going through), or through
google.

 

Thanks for any help,

 

-Adrian

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://dojotoolkit.org/pipermail/dojo-interest/attachments/20070122/d2986186/attachment-0001.html


More information about the Dojo-interest mailing list