API Reference: Jx.Layout
Note: The examples on this page are mostly set up to trigger a resize on Layout-managed elements when the page is resized.
The most basic use of Jx.Layout is to make an element fill another element. This basic use has one main advantage over CSS, it accommodates margins, borders and padding on both the container and the contained element.
In this example, this white <div> fills the light grey container, respecting the 10px CSS padding on the container. If we had done this using CSS and a width and height of 100%, the inner box would be the same size as the outer dimensions of the outer box. Using width: auto will work (the element will fill the width correct, considering margins, borders and padding on both elements), but there is no other solution for height unfortunately.
Layout starts to shine when you want to establish a more complex set of constraints. In this example, we have a layout that might be used for an application with a fixed height header and footer that stretch to fill the width, and a content area with fixed width left and right columns and a stretchy center area, all of which fill the available height. All these elements are contained in a single container (defined by the darker gray border) that is also managed by Jx.Layout. We call the resize method on the outer element when the page size changes, and Jx.Layout automatically cascades this to the inner elements for us if it is required.
This element has variable width and a fixed height, attached to the top of the container.
This element has variable height, fixed width and top offset.
This element has variable width and height with fixed left, top, right and bottom offsets.
This element has variable height, fixed width and top offset, attached to the right side.
This element has variable width and fixed height, attached to the bottom of the container.