|
cflayout
DescriptionCreates
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.
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.
HistoryColdFusion
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.
Attributes
Attribute
|
Req/Opt
|
Default
|
Applies to
|
Description
|
type
|
Required
|
|
all
|
The type of layout. The following values
are valid:
accordion: a container
with multiple layout areas that display no more than one area at
a time. Each layout area has a title bar that is always displayed.
The user can expand or collapse each layout area by clicking + or
- button on the layout area title bar
border: a box with a border and up to five
layout areas, each with a border. For more information, see Usage.
hbox: a horizontal box where all immediate
child cflayoutarea controls are arranged horizontally.
tab: a tabbed display where the current
child cflayoutarea tag occupies the display area
of the layout, and each layout area has a tab that the user can
select to display its contents.
vbox: a vertical box where all immediate
child cflayoutarea controls are arranged vertically.
|
activeOnTop
|
Optional
|
false
|
accordion
|
Specifies whether the active panel moves
to the top of the layout, becoming the first panel.
|
align
|
Optional
|
Determined by browser layout direction
|
all
|
Specifies the default alignment of the content
of child layout areas. Each cflayoutarea tag can
specify an alignment attribute to override this value.
The
following values are valid:
center
justify
left
right
|
fillHeight
|
Optional
|
true
|
accordion
|
A Boolean value that specifies whether to
adjust the active layout area’s height to fill the available space
in the layout control container:
If you specify fillHeight as false,
then ColdFusion sets overflow to hidden.
|
fitToWindow
|
Optional
|
false
|
border
|
A Boolean value that specifies whether the
border layout must occupy 100% of the width and height of the window:
The underlying
implementation uses a viewport, hence, any content outside the layout
is not accommodated in the layout.
When using nested border
layouts, if you specify fitToWindow as true, the layouts nested
within the border layout may not automatically fit into the available
space. Hence, for nested layouts, it is recommended to use width or size instead
of fitToWindow.
|
height
|
Optional
|
600 for border layout; autoheight for others
|
all
|
Height of the layout in pixels.
For
the tab layout, the height attribute has the same
functionality as the tabheight attribute. If you
specify both height and tabheight attributes, height takes
priority over tabheight. The height value specified here
takes priority over the height value specified using the style attribute.
|
name
|
Optional
|
|
all
|
The name of the layout region. Should be
unique on a page.
|
padding
|
Optional
|
0
|
hbox, vbox
|
For hbox layouts,
specifies the padding on the right side of each child layout area.
For vbox layouts, specifies the padding
at the bottom of each child layout area.
You
can use any valid CSS length or percent format, such as 10, 10%
10px, or 10em, for this attribute.
The padding is included
in the child layout area and takes the style of the layout area.
|
style
|
Optional
|
|
all
|
A CSS style specification that defines layout
styles.
|
tabHeight
|
Optional
|
|
tab
|
Specifies the height of the content area
of all child layout areas. You can override this setting by specifying
a height setting in a individual cflayoutarea tag
style attributes.
|
tabPosition
|
Optional
|
top
|
tab
|
Specifies the location of the tabs relative
to the tab region contents.
|
tabStrip
|
Optional
|
true
|
tab
|
If true, a background tab
strip is displayed.
|
titleCollapse
|
Optional
|
true
|
accordion
|
Specifies whether clicking anywhere on each
layout area’’s title bar expands and collapses the layout area.
If false, the user must click the title bar +/- button
to expand or collapse a layout area.
|
width
|
Optional
|
|
all
|
Width of the layout in pixels. This value
takes priority over the width defined using the style attribute.
If no value is specified, autoWidth is applied and therefore, content
fills the entire screen.
|
UsageThe 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.
For more information on configuring layout
areas, see cflayoutarea.
ExampleThe
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>
|