Jx.Layout

Extends: Object

Implements: Options, Events

Jx.Layout is used to provide more flexible layout options for applications

Jx.Layout wraps an existing DOM element (typically a div) and provides extra functionality for sizing that element within its parent and sizing elements contained within it that have a ‘resize’ function attached to them.

To create a Jx.Layout, pass the element or id plus an options object to the constructor.

Example

var myContainer = new Jx.Layout('myDiv', options);

Events

sizeChange

fired when the size of the container changes

License

This file is licensed under an MIT style license

Summary

Jx.Layout	Extends: Object
Options
propagate	boolean, controls propogation of resize to child nodes.
position	how to position the element, either ‘absolute’ or ‘relative’.
left	the distance (in pixels) to maintain the left edge of the element from its parent element.
right	the distance (in pixels) to maintain the right edge of the element from its parent element.
top	the distance (in pixels) to maintain the top edge of the element from its parent element.
bottom	the distance (in pixels) to maintain the bottom edge of the element from its parent element.
width	the width (in pixels) of the element.
height	the height (in pixels) of the element.
minWidth	the minimum width that the element can be sized to.
minHeight	the minimum height that the element can be sized to.
maxWidth	the maximum width that the element can be sized to.
maxHeight	the maximum height that the element can be sized to.
Constructor
Jx.Layout	Create a new instance of Jx.Layout.
Functions
windowResize	when the window is resized, any Jx.Layout controlled elements that are direct children of the BODY element are resized
resize	resize the element controlled by this Jx.Layout object.
TODO
check left, top, width, height against current styles	and only apply changes if they are not the same.

Options

propagate

boolean, controls propogation of resize to child nodes. True by default. If set to false, changes in size will not be propogated to child nodes.

position

how to position the element, either ‘absolute’ or ‘relative’. The default (if not passed) is ‘absolute’. When using ‘absolute’ positioning, both the width and height are controlled by Jx.Layout. If ‘relative’ positioning is used then only the width is controlled, allowing the height to be controlled by its content.

left

the distance (in pixels) to maintain the left edge of the element from its parent element. The default value is 0. If this is set to ‘null’, then the left edge can be any distance from its parent based on other parameters.

right

the distance (in pixels) to maintain the right edge of the element from its parent element. The default value is 0. If this is set to ‘null’, then the right edge can be any distance from its parent based on other parameters.

top

the distance (in pixels) to maintain the top edge of the element from its parent element. The default value is 0. If this is set to ‘null’, then the top edge can be any distance from its parent based on other parameters.

bottom

the distance (in pixels) to maintain the bottom edge of the element from its parent element. The default value is 0. If this is set to ‘null’, then the bottom edge can be any distance from its parent based on other parameters.

width

the width (in pixels) of the element. The default value is null. If this is set to ‘null’, then the width can be any value based on other parameters.

height

the height (in pixels) of the element. The default value is null. If this is set to ‘null’, then the height can be any value based on other parameters.

minWidth

the minimum width that the element can be sized to. The default value is 0.

minHeight

the minimum height that the element can be sized to. The default value is 0.

maxWidth

the maximum width that the element can be sized to. The default value is -1, which means no maximum.

maxHeight

the maximum height that the element can be sized to. The default value is -1, which means no maximum.

Constructor

Jx.Layout

Create a new instance of Jx.Layout.

Parameters

domObj	{HTMLElement} element or id to apply the layout to
options	Jx.Layout.Options

Functions

windowResize

windowResize: function()

when the window is resized, any Jx.Layout controlled elements that are direct children of the BODY element are resized

resize

resize: function( options )

resize the element controlled by this Jx.Layout object.

Parameters

options

new options to apply, see Jx.Layout.Options

TODO

check left, top, width, height against current styles

and only apply changes if they are not the same.