RasterSplitter( parent, alignment, size )
Implements a splitted panel that host two content areas which size can be adjusted by dragging the splitting line between the two.The two panels or content areas of a splitter are identified with the numbers 1 and 2. Panel 1 always has fixed
size; Panel 2 occupies the
remaining space. Panel 1 can be aligned to any of the sides of the splitter
control. The splitter control takes all of the available space of its
containing parent element.
The following code creates a splitter in the BODY element having a left panel(#1) measuring 200px and a right panel(#2) taking the remaining of the horizontal space. An existing DIV with
id="leftDiv" is dom-relocated
inside the left panel, a list control is created, and placed in the right
panel:
var splitter = new RasterSplitter( document.body, "left", 200 ); // 'leftDiv' is the id of a DIV element to move into the panel 1 splitter.setContent( 1, "leftDiv" ); // Create a list control and // place it panel 2 of the splitter var list = new RasterList( null, "grid" ); list.add( null, ICONS32.GRAPHICS, null, "Customize" ); list.add( null, ICONS32.ADDRESS_BOOK, null, "Addresses" ); list.add( null, ICONS32.ACCESSORIES, null, "Accessories" ); splitter.setContent( 2, list ); ... <div id='leftDiv'> This is the left panel content. </div>
Parameters
| Name | Type | Description | |
|---|---|---|---|
| parent | object |
One of the following: a string containing the ID
of a DOM element, a reference to a DOM element, or another
control object. If this argument is null, the control is
created but not attached to the DOM tree; setParent() must
be invoked later to specify the parent control. |
|
| alignment | string | Alignment of panel 1. Use one of the following values: 'top', 'right, 'bottom', or 'left'. This argument is not case-sensitive. | |
| size | number | Size of the splitter's panel 1. |