Upgrade to ExtJS 3.3.0 - Released 10/06/2010
[extjs.git] / docs / output / Ext.layout.HBoxLayout.html
index a7e9c72..2d983d9 100644 (file)
@@ -1,6 +1,6 @@
-<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.layout.HBoxLayout-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>&#13;<a class="inner-link" href="#Ext.layout.HBoxLayout-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>&#13;<a class="inner-link" href="#Ext.layout.HBoxLayout-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>&#13;<a class="inner-link" href="#Ext.layout.HBoxLayout-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>&#13;<a class="bookmark" href="../docs/?class=Ext.layout.HBoxLayout"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>&#13;</div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.layout.ContainerLayout.html" ext:member="" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a>&#13;&nbsp;&nbsp;<img src="resources/elbow-end.gif"><a href="output/Ext.layout.BoxLayout.html" ext:member="" ext:cls="Ext.layout.BoxLayout">BoxLayout</a>&#13;&nbsp;&nbsp;&nbsp;&nbsp;<img src="resources/elbow-end.gif">HBoxLayout</pre></div><h1>Class <a href="source/BoxLayout.html#cls-Ext.layout.HBoxLayout">Ext.layout.HBoxLayout</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.layout</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/BoxLayout.html#cls-Ext.layout.HBoxLayout">BoxLayout.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/BoxLayout.html#cls-Ext.layout.HBoxLayout">HBoxLayout</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.layout.BoxLayout.html" ext:cls="Ext.layout.BoxLayout" ext:member="">BoxLayout</a></td></tr></table><div class="description"><p>A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.layout.HBoxLayout-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>&#13;<a class="inner-link" href="#Ext.layout.HBoxLayout-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a>&#13;<a class="inner-link" href="#Ext.layout.HBoxLayout-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a>&#13;<a class="inner-link" href="#Ext.layout.HBoxLayout-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>&#13;<a class="bookmark" href="../docs/?class=Ext.layout.HBoxLayout"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>&#13;</div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.layout.ContainerLayout.html" ext:member="" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a>&#13;&nbsp;&nbsp;<img src="resources/elbow-end.gif"><a href="output/Ext.layout.BoxLayout.html" ext:member="" ext:cls="Ext.layout.BoxLayout">BoxLayout</a>&#13;&nbsp;&nbsp;&nbsp;&nbsp;<img src="resources/elbow-end.gif">HBoxLayout</pre></div><h1>Class <a href="source/HBoxLayout.html#cls-Ext.layout.HBoxLayout">Ext.layout.HBoxLayout</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.layout</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/HBoxLayout.html#cls-Ext.layout.HBoxLayout">HBoxLayout.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/HBoxLayout.html#cls-Ext.layout.HBoxLayout">HBoxLayout</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.layout.BoxLayout.html" ext:cls="Ext.layout.BoxLayout" ext:member="">BoxLayout</a></td></tr></table><div class="description"><p>A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
 space between child items containing a numeric <code>flex</code> configuration.</p>
-This layout may also be used to set the heights of child items by configuring it with the <a href="output/Ext.layout.HBoxLayout.html#Ext.layout.HBoxLayout-align" ext:member="align" ext:cls="Ext.layout.HBoxLayout">align</a> option.</div><div class="hr"></div><a id="Ext.layout.HBoxLayout-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.HBoxLayout-align"></a><b><a href="source/BoxLayout.html#cfg-Ext.layout.HBoxLayout-align">align</a></b> : String<div class="mdesc"><div class="short">Controls how the child items of the container are aligned. Acceptable configuration values for this
+This layout may also be used to set the heights of child items by configuring it with the <a href="output/Ext.layout.HBoxLayout.html#Ext.layout.HBoxLayout-align" ext:member="align" ext:cls="Ext.layout.HBoxLayout">align</a> option.</div><div class="hr"></div><a id="Ext.layout.HBoxLayout-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.HBoxLayout-align"></a><b><a href="source/HBoxLayout.html#cfg-Ext.layout.HBoxLayout-align">align</a></b> : String<div class="mdesc"><div class="short">Controls how the child items of the container are aligned. Acceptable configuration values for this
 property are:
 &lt;di...</div><div class="long">Controls how the child items of the container are aligned. Acceptable configuration values for this
 property are:
@@ -48,12 +48,12 @@ which assign a value by default:
 </ul></div>
 To configure the above Classes with an extra CSS class append to the default.  For example,
 for ColumnLayout:<pre><code>extraCls: <em>'x-column custom-class'</em></code></pre>
-</p></div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#extraCls" ext:member="#extraCls" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.HBoxLayout-flex"></a><b><a href="source/BoxLayout.html#cfg-Ext.layout.HBoxLayout-flex">flex</a></b> : Number<div class="mdesc"><div class="short">This configuation option is to be applied to child items of the container managed
+</p></div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#extraCls" ext:member="#extraCls" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.HBoxLayout-flex"></a><b><a href="source/HBoxLayout.html#cfg-Ext.layout.HBoxLayout-flex">flex</a></b> : Number<div class="mdesc"><div class="short">This configuation option is to be applied to child items of the container managed
 by this layout. Each child item wit...</div><div class="long">This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed
 by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>horizontally</b>
 according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with
 a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or
-<tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).</div></div></td><td class="msource">HBoxLayout</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.HBoxLayout-pack"></a><b><a href="source/BoxLayout.html#cfg-Ext.layout.HBoxLayout-pack">pack</a></b> : String<div class="mdesc"><div class="short">Controls how the child items of the container are packed together. Acceptable configuration values
+<tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).</div></div></td><td class="msource">HBoxLayout</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.HBoxLayout-pack"></a><b><a href="source/HBoxLayout.html#cfg-Ext.layout.HBoxLayout-pack">pack</a></b> : String<div class="mdesc"><div class="short">Controls how the child items of the container are packed together. Acceptable configuration values
 for this property ...</div><div class="long">Controls how the child items of the container are packed together. Acceptable configuration values
 for this property are:
 <div class="mdetail-params"><ul>
@@ -86,7 +86,10 @@ Ext.layout.FormLayout) to create the DOM structure o...</div><div class="long">T
 <a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a>) to create the DOM structure of a fully wrapped,
 labeled and styled form Field. A default Template is supplied, but this may be
 overriden to create custom field structures. The template processes values returned from
-<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-getTemplateArgs" ext:member="getTemplateArgs" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout.getTemplateArgs</a>.</div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#fieldTpl" ext:member="#fieldTpl" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.ContainerLayout-if"></a><b><a href="source/ContainerLayout.html#prop-Ext.layout.ContainerLayout-if">if</a></b> : Object<div class="mdesc"><div class="short">This monitorResize flag will be renamed soon as to avoid confusion
+<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-getTemplateArgs" ext:member="getTemplateArgs" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout.getTemplateArgs</a>.</div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#fieldTpl" ext:member="#fieldTpl" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="property-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.HBoxLayout-for"></a><b><a href="source/HBoxLayout.html#prop-Ext.layout.HBoxLayout-for">for</a></b> : Object<div class="mdesc"><div class="short">When we have a shortfall but are not tooNarrow, we need to shrink the width of each non-flexed item.
+Flexed items are...</div><div class="long">When we have a shortfall but are not tooNarrow, we need to shrink the width of each non-flexed item.
+Flexed items are immediately reduced to their minWidth and anything already at minWidth is ignored.
+The remaining items are collected into the minWidths array, which is later used to distribute the shortfall.</div></div></td><td class="msource">HBoxLayout</td></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.ContainerLayout-if"></a><b><a href="source/ContainerLayout.html#prop-Ext.layout.ContainerLayout-if">if</a></b> : Object<div class="mdesc"><div class="short">This monitorResize flag will be renamed soon as to avoid confusion
 with the Container version which hooks onWindowRes...</div><div class="long">This monitorResize flag will be renamed soon as to avoid confusion
 with the Container version which hooks onWindowResize to doLayout
 monitorResize flag in this context attaches the resize event between