Login Register

new BorderContainer widget

dijit.layout.BorderContainer describes a layout for up to 5 panels, arranged with a widget in the center and up to four widgets, one on each edge. The layout follows either the 'headline' design where the top and bottom extend to the edges, or a 'sidebar' design where the sides extend the full height of the widget. Each edge has its size specified by CSS and has an optional 'splitter' attached to it so the user can interact to adjust the size.

Porting notes:
dijit.layout.LayoutContainer -> dijit.layout.BorderContainer
child geometry is controlled via CSS; height must be set to pixels or a percentage for top/bottom, width for left/right
layoutAlign -> region (left, right, top and bottom values as before, but use 'center' instead of 'client'
sizeMin/sizeMax -> minSize/maxSize
sizeShare -> height/width CSS settings as a percentage
dijit.layout.SplitContainer -> use "splitters" attribute on a child of BorderContainer
activeSizing -> liveSplitters
sizerWidth -> splitter width is controlled via CSS
design (sidebar/headline)
BiDi: use "leading" and "trailing" instead of "left" and "right" to have panels automatically flip for right-to-left rendering.
A11y: splitter has keyboard control (limited at the moment) and child panels are assumed to be added to the container in layout order

The new paradigm tries to target what we think of as the most common layout tasks. Please note:
- BorderContainer does not support "Delphi" style layout, where you can declare multiple 'left', 'right', 'top' or 'bottom' panels and have them eat away from the center. Instead, you must use nested BorderContainer widgets to achieve complex layouts.
- This implies that you can only have three panels across or three panels down. If you want a splitter container with 4 or more widgets, you'll also have to use nested containers. We may provide a row or column layout widget in dijit or dojox in the future.
- It is not possible to specify layout in equal portions all the way across (e.g. 33% left, 33% center, 33% right) Instead, you may specify 33% for left and right, but the center will grow and shrink as the widget is resized. Again, a new row/column layout widget may be needed here.
- the "design" attribute (sidebar, or headline by default) controls whether the side panels or the top panels, respectively, get priority in the layout at the corners