The next image shows a sidebar design mode:
As you can see, both contain the same number and types of panels but the width of top and bottom
vs the height of left and right are managed differently.
When the Border Container is created, it is initially "empty" meaning it has no content. Its children
are most likely going to be instances of "ContentPane". A child can be added using the
addChild() method of the Border Container. When a child is added, the child tells Border
Container which region it should live in by supplying a property called "region".
The left, right, top and bottom regions can be given sizes. The center region will take what remains.
It makes sense that left and right can have a width specifier while top and bottom can have a height
specifier.
When the Border Container is created, it can be given a specific size or else it can be asked to be
"100%" meaning it will be the size of the window. This becomes important because if the window
were resized, Border Container will also resize resulting in resizing of the containers within.
An example setup might be:
<html style="height: 100%;">
<body class="claro" style="width: 100%; height: 100%; margin: 0px;">
<div data-dojo-type="dijit/layout/BorderPane"
style="width: 100%; height: 100%;">
</div>
</body>
</html>
The regions other than center can be defined with a property called splitter. If set to true, then
Page 169
Comentarios a estos manuales