cflayout

Description

Creates a region of its container (such as the browser window or a cflayoutarea tag) with a specific layout behavior: a bordered area, a horizontal or vertically arranged box, or a tabbed navigator.

History

ColdFusion 9: Added accordion value of the type attribute and the activeOnTop, fillHeight, and titleCollapse attributes. The attributes, height and width are supported for the types hbox and vbox. ColdFusion 8: Added this tag.

Syntax

<cflayout 
    type="accordion|border|hbox|tab|vbox" 
    activeOnTop="false|true" 
    align="center|justify|left|right" 
    fillHeight="true|false" 
    fitToWindow="true|false" 
    height="integer" 
    name="string" 
    padding="integer" 
    style="CSS style specification" 
    tabHeight="measurement" 
    tabPosition="top|bottom" 
    tabStrip="true|false" 
    titleCollapse="true|false" 
    width="integer"> 
 
        cflayoutarea tags 
 
</cflayout>

Note: You can specify this tag’s attribute in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag’s attribute name as structure key.

Attributes

Attribute	Description	Required	Default
activeOnTop	Optional
align	Optional
fillHeight	Optional
fitToWindow	Optional
height	Optional
name	Optional
padding	Optional
style	Optional
tabHeight	Optional
tabPosition	Optional
tabStrip	Optional
titleCollapse	Optional
type	Required
width	Optional

Usage

The immediate children of a cflayout tag must be cflayoutarea tags or nondisplay tags whose bodies contain one or more cflayoutarea tags at the top level. For example, a cflayout tag could have a tag such as cfloop or cfquery as a child, and these tags would have cflayoutarea tags in their bodies.
The border type layout has the following characteristics:
The layout control and each of its immediate layout area children is surrounded by a border.
The control can have up to five children positioned at the left, right, center, top, and bottom of the layout.
You can configure the child layout areas, except for the center area, to have splitters so that users can expand and collapse them or close them completely.
The center child layout area occupies all available space in the layout that is not used by any of the other layout areas.
To specify layout height, use the height setting of the style attribute.
Note: If you specify a border layout on a page that has a DOCTYPE declaration, the layout cannot properly determine its height and you must specify the height in a cflayout tag style attribute.
You can use the following JavaScript functions to access the underlying Ext JS - JavaScript Library objects for border and tab type cflayout controls.
Function
Description
ColdFusion.Layout.getBorderLayout
Gets the underlying Ext JS - JavaScript Library object for the specified border type cflayout control.
ColdFusion.Layout.getTabLayout
Gets the underlying Ext JS - JavaScript Library object for the specified tab type cflayout control.
ColdFusion.Layout.getAccordionLayout
Gets the underlying Ext JS - JavaScript Library object for the specified accordion type cflayout control.

For more information on configuring layout areas, see cflayoutarea.

Example

The following example shows a set of nested layouts. The outer layout is a vbox, with two layout areas. The top layout area has a border layout, the bottom layout area contains a form with buttons to control the display of the border layout areas.

<html> 
<head> 
</head> 
<body> 
<cflayout name="outerlayout" type="vbox"> 
    <cflayoutarea style="height:400;"> 
        <cflayout name="thelayout" type="border"> 
            <!--- The 100% height style ensures that the background color fills  
                the area. ---> 
            <cflayoutarea position="top" size="100" splitter="true"  
                    style="background-color:##00FFFF; height:100%"> 
                This is text in layout area 1: top 
            </cflayoutarea> 
            <cflayoutarea title="Left layout area" position="left" 
                    closable="true"  
                    collapsible="true" name="left" splitter="true" 
                    style="background-color:##FF00FF; height:100%"> 
                This is text in layout area 2: left<br /> 
                You can close and collapse this area. 
            </cflayoutarea> 
            <cflayoutarea position="center" 
                    style="background-color:##FFFF00; height:100%"> 
                This is text in layout area 3: center<br /> 
            </cflayoutarea> 
            <cflayoutarea position="right" collapsible="true"  
                    title="Right Layout Area" initcollapsed="true" 
                    style="background-color:##FF00FF; height:100%" > 
                This is text in layout area 4: right<br /> 
                You can collapse this, but not close it.<br /> 
                It is initially collapsed. 
            </cflayoutarea> 
            <cflayoutarea position="bottom" size="100" splitter="true" 
                     style="background-color:##00FFFF; height:100%"> 
                This is text in layout area 5: bottom 
            </cflayoutarea>  
        </cflayout> 
    </cflayoutarea> 
 
    <cflayoutarea style="height:100; ; background-color:##FFCCFF"> 
        <h3>Change the state of Area 2</h3> 
        <cfform> 
            <cfinput name="expand2" width="100" value="Expand Area 2" type="button"  
                onClick="ColdFusion.Layout.expandArea('thelayout', 'left');"> 
            <cfinput name="collapse2" width="100" value="Collapse Area 2" type="button" 
                onClick="ColdFusion.Layout.collapseArea('thelayout', 'left');"> 
            <cfinput name="show2" width="100" value="Show Area 2" type="button"  
                onClick="ColdFusion.Layout.showArea('thelayout', 'left');"> 
            <cfinput name="hide2" width="100" value="Hide Area 2" type="button"  
                onClick="ColdFusion.Layout.hideArea('thelayout', 'left');"> 
        </cfform> 
    </cflayoutarea> 
</cflayout> 
</body> 
</html>

cfmldocs