/* This file is part of Ext JS 3.4 Copyright (c) 2011-2013 Sencha Inc Contact: http://www.sencha.com/contact GNU General Public License Usage This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html. If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact. Build date: 2013-04-03 15:07:25 */ Ext.data.JsonP.Ext_layout_HBoxLayout({"alternateClassNames":[],"aliases":{},"enum":null,"parentMixins":[],"tagname":"class","subclasses":[],"extends":"Ext.layout.BoxLayout","uses":[],"html":"

Hierarchy

Files

A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal\nspace between child items containing a numeric flex configuration.

\n\n\n

This layout may also be used to set the heights of child items by configuring it with the align option.

\n
Defined By

Config options

Ext.layout.HBoxLayout
view source
: String
Controls how the child items of the container are aligned. ...

Controls how the child items of the container are aligned. Acceptable configuration values for this\nproperty are:

\n\n
    \n
  • top : Default
    child items are aligned vertically\nat the top of the container
  • \n
  • middle :
    child items are aligned vertically in the\nmiddle of the container
  • \n
  • stretch :
    child items are stretched vertically to fill\nthe height of the container
  • \n
  • stretchmax :
    child items are stretched vertically to\nthe height of the largest item.
  • \n
\n\n

Defaults to: 'top'

If the individual contained items do not have a margins\nproperty specified, the default margins from this property wi...

If the individual contained items do not have a margins\nproperty specified, the default margins from this property will be\napplied to each item.

\n\n\n

This property may be specified as an object containing margins\n\n\n

to apply in the format:

\n\n
{\n    top: (top margin),\n    right: (right margin),\n    bottom: (bottom margin),\n    left: (left margin)\n}
\n\n\n

This property may also be specified as a string containing\nspace-separated, numeric margin values. The order of the sides associated\nwith each value matches the way CSS processes margin values:

\n\n\n
    \n
  • If there is only one value, it applies to all sides.
  • \n
  • If there are two values, the top and bottom borders are set to the\nfirst value and the right and left are set to the second.
  • \n
  • If there are three values, the top is set to the first value, the left\nand right are set to the second, and the bottom is set to the third.
  • \n
  • If there are four values, they apply to the top, right, bottom, and\nleft, respectively.
  • \n
\n\n\n

Defaults to:

\n\n\n
{top:0, right:0, bottom:0, left:0}\n
\n\n

Defaults to: {left: 0, top: 0, right: 0, bottom: 0}

An optional extra CSS class that will be added to the container. ...

An optional extra CSS class that will be added to the container. This can be useful for adding\ncustomized styles to the container or any of its children using standard CSS rules. See\nExt.Component.ctCls also.

\n\n\n

Note: extraCls defaults to '' except for the following classes\nwhich assign a value by default:\n

\nTo configure the above Classes with an extra CSS class append to the default. For example,\nfor ColumnLayout:\n
extraCls: 'x-column custom-class'\n
\n

\n\n

Defaults to: 'x-box-item'

Overrides: Ext.layout.ContainerLayout.extraCls

Ext.layout.HBoxLayout
view source
: Number
This configuation option is to be applied to child items of the container managed\nby this layout. ...

This configuation option is to be applied to child items of the container managed\nby this layout. Each child item with a flex property will be flexed horizontally\naccording to each item's relative flex value compared to the sum of all items with\na flex value specified. Any child items that have either a flex = 0 or\nflex = undefined will not be 'flexed' (the initial size will not be changed).

\n
Ext.layout.HBoxLayout
view source
: String
Controls how the child items of the container are packed together. ...

Controls how the child items of the container are packed together. Acceptable configuration values\nfor this property are:

\n\n
    \n
  • start : Default
    child items are packed together at\nleft side of container
  • \n
  • center :
    child items are packed together at\nmid-width of container
  • \n
  • end :
    child items are packed together at right\nside of container
  • \n
\n\n
Sets the padding to be applied to all child items managed by this layout. ...

Sets the padding to be applied to all child items managed by this layout.

\n\n\n

This property must be specified as a string containing\nspace-separated, numeric padding values. The order of the sides associated\nwith each value matches the way CSS processes padding values:

\n\n\n
    \n
  • If there is only one value, it applies to all sides.
  • \n
  • If there are two values, the top and bottom borders are set to the\nfirst value and the right and left are set to the second.
  • \n
  • If there are three values, the top is set to the first value, the left\nand right are set to the second, and the bottom is set to the third.
  • \n
  • If there are four values, they apply to the top, right, bottom, and\nleft, respectively.
  • \n
\n\n\n

Defaults to: \"0\"

\n\n

Defaults to: '0'

True to hide each contained item on render (defaults to false).

\n

True to hide each contained item on render (defaults to false).

\n
Defined By

Properties

private

\n

private

\n
Array of the last calculated height, width, top and left positions of each visible rendered component\nwithin the Box ...

Array of the last calculated height, width, top and left positions of each visible rendered component\nwithin the Box layout.

\n
The Ext.Template used by Field rendering layout classes (such as\nExt.layout.FormLayout) to create the DOM structure o...

The Ext.Template used by Field rendering layout classes (such as\nExt.layout.FormLayout) to create the DOM structure of a fully wrapped,\nlabeled and styled form Field. A default Template is supplied, but this may be\noverriden to create custom field structures. The template processes values returned from\nExt.layout.FormLayout.getTemplateArgs.

\n

Placeholder for the derived layouts

\n

Placeholder for the derived layouts

\n
...
\n

Defaults to: 'x-box-inner'

Private cache of the last measured size of the layout target. ...

Private cache of the last measured size of the layout target. This should never be used except by\nBoxLayout subclasses during their onLayout run.

\n
private ...

private

\n

Defaults to: true

Overrides: Ext.layout.ContainerLayout.monitorResize

documented in subclasses ...

documented in subclasses

\n

Defaults to: 'start'

...
\n

Defaults to: 'x-box-layout-ct'

Ext.layout.HBoxLayout
view source
: Stringprivate
top, middle, stretch, strechmax ...

top, middle, stretch, strechmax

\n

Defaults to: 'hbox'

Overrides: Ext.layout.BoxLayout.type

Defined By

Methods

Workaround for how IE measures autoWidth elements. ...

Workaround for how IE measures autoWidth elements. It prefers bottom-up measurements

\n\n
 whereas other browser prefer top-down.  We will hide all target child elements before we measure and\n put them back to get an accurate measurement.\n
\n

Parameters

  • target : Object
    \n
  • viewFlag : Object
    \n
...
\n

Parameters

  • c : Object
    \n
Ext.layout.HBoxLayout
view source
( visibleItems, targetSize ) : Objectprivate
Calculates the size and positioning of each item in the HBox. ...

Calculates the size and positioning of each item in the HBox. This iterates over all of the rendered,\nvisible items and returns a height, width, top and left for each, as well as a reference to each. Also\nreturns meta data such as maxHeight which are useful when resizing layout wrappers such as this.innerCt.

\n

Parameters

  • visibleItems : Array

    The array of all rendered, visible items to be calculated for

    \n
  • targetSize : Object

    Object containing target size and height

    \n

Returns

  • Object

    Object containing box measurements for each child, plus meta data

    \n
Applies extraCls and hides the item if renderHidden is true ...

Applies extraCls and hides the item if renderHidden is true

\n

Parameters

  • c : Object
    \n
private. ...

private.\nGet all rendered items to lay out.

\n

Parameters

  • ct : Object
    \n
Returns all items that are both rendered and visible ...

Returns all items that are both rendered and visible

\n

Parameters

  • ct : Object
    \n

Returns

  • Array

    All matching items

    \n
( previousTargetSize, container, target )private
This should be called after onLayout of any BoxLayout subclass. ...

This should be called after onLayout of any BoxLayout subclass. If the target's overflow is not set to 'hidden',\nwe need to lay out a second time because the scrollbars may have modified the height and width of the layout\ntarget. Having a Box layout inside such a target is therefore not recommended.

\n

Parameters

  • previousTargetSize : Object

    The size and height of the layout target before we just laid out

    \n
  • container : Ext.Container

    The container

    \n
  • target : Ext.Element

    The target element

    \n
private ...

private

\n

Parameters

  • c : Object
    \n
  • target : Object
    \n

Overrides: Ext.layout.ContainerLayout.isValidParent

private ...

private

\n
( container, target )private
Runs the child box calculations and caches them in childBoxCache. ...

Runs the child box calculations and caches them in childBoxCache. Subclasses can used these cached values\nwhen laying out

\n

Parameters

  • container : Object
    \n
  • target : Object
    \n

Overrides: Ext.layout.ContainerLayout.onLayout

...
\n

Parameters

  • c : Object
    \n
Parses a number or string representing margin sizes into an object. ...

Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations\n(e.g. 10, \"10\", \"10 10\", \"10 10 10\" and \"10 10 10 10\" are all valid options and would return the same result)

\n

Parameters

Returns

  • Object

    An object with margin sizes for top, right, bottom and left

    \n
private ...

private

\n

Parameters

  • ct : Object
    \n
  • target : Object
    \n

Overrides: Ext.layout.ContainerLayout.renderAll

( c, position, target )private
private\n\nRenders the given Component into the target Element. ...

private

\n\n

Renders the given Component into the target Element. If the Component is already rendered,\nit is moved to the provided target instead.

\n

Parameters

  • c : Ext.Component

    The Component to render

    \n
  • position : Number

    The position within the target to render the item to

    \n
  • target : Ext.Element

    The target Element

    \n

Overrides: Ext.layout.ContainerLayout.renderItem

private ...

private

\n

Parameters

  • ct : Object
    \n
Resizes and repositions each child component ...

Resizes and repositions each child component

\n

Parameters

  • boxes : Array

    The box measurements

    \n
( currentSize, calculations )private
Called by onRender just before the child components are sized and positioned. ...

Called by onRender just before the child components are sized and positioned. This resizes the innerCt\nto make sure all child items fit within it. We call this before sizing the children because if our child\nitems are larger than the previous innerCt size the browser will insert scrollbars and then remove them\nagain immediately afterwards, giving a performance hit.\nSubclasses should provide an implementation.

\n

Parameters

  • currentSize : Object

    The current height and width of the innerCt

    \n
  • calculations : Array

    The new box calculations of all items to be laid out

    \n
","superclasses":["Ext.layout.ContainerLayout","Ext.layout.BoxLayout"],"meta":{},"requires":[],"html_meta":{},"statics":{"property":[],"cfg":[],"css_var":[],"method":[],"event":[],"css_mixin":[]},"files":[{"href":"HBoxLayout.html#Ext-layout-HBoxLayout","filename":"HBoxLayout.js"}],"linenr":1,"members":{"property":[{"tagname":"property","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"activeItem","id":"property-activeItem"},{"tagname":"property","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"childBoxCache","id":"property-childBoxCache"},{"tagname":"property","owner":"Ext.layout.ContainerLayout","meta":{},"name":"fieldTpl","id":"property-fieldTpl"},{"tagname":"property","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"getLayoutTargetSize","id":"property-getLayoutTargetSize"},{"tagname":"property","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"innerCls","id":"property-innerCls"},{"tagname":"property","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"layoutTargetLastSize","id":"property-layoutTargetLastSize"},{"tagname":"property","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"monitorResize","id":"property-monitorResize"},{"tagname":"property","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"pack","id":"property-pack"},{"tagname":"property","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"scrollOffset","id":"property-scrollOffset"},{"tagname":"property","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"targetCls","id":"property-targetCls"},{"tagname":"property","owner":"Ext.layout.HBoxLayout","meta":{"private":true},"name":"type","id":"property-type"}],"cfg":[{"tagname":"cfg","owner":"Ext.layout.HBoxLayout","meta":{},"name":"align","id":"cfg-align"},{"tagname":"cfg","owner":"Ext.layout.BoxLayout","meta":{},"name":"defaultMargins","id":"cfg-defaultMargins"},{"tagname":"cfg","owner":"Ext.layout.BoxLayout","meta":{},"name":"extraCls","id":"cfg-extraCls"},{"tagname":"cfg","owner":"Ext.layout.HBoxLayout","meta":{},"name":"flex","id":"cfg-flex"},{"tagname":"cfg","owner":"Ext.layout.HBoxLayout","meta":{},"name":"pack","id":"cfg-pack"},{"tagname":"cfg","owner":"Ext.layout.BoxLayout","meta":{},"name":"padding","id":"cfg-padding"},{"tagname":"cfg","owner":"Ext.layout.ContainerLayout","meta":{},"name":"renderHidden","id":"cfg-renderHidden"}],"css_var":[],"method":[{"tagname":"method","owner":"Ext.layout.BoxLayout","meta":{},"name":"constructor","id":"method-constructor"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"IEMeasureHack","id":"method-IEMeasureHack"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"afterRemove","id":"method-afterRemove"},{"tagname":"method","owner":"Ext.layout.HBoxLayout","meta":{"private":true},"name":"calculateChildBoxes","id":"method-calculateChildBoxes"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"configureItem","id":"method-configureItem"},{"tagname":"method","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"destroy","id":"method-destroy"},{"tagname":"method","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"getLayoutTargetSize","id":"method-getLayoutTargetSize"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"getRenderedItems","id":"method-getRenderedItems"},{"tagname":"method","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"getVisibleItems","id":"method-getVisibleItems"},{"tagname":"method","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"handleTargetOverflow","id":"method-handleTargetOverflow"},{"tagname":"method","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"isValidParent","id":"method-isValidParent"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"layout","id":"method-layout"},{"tagname":"method","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"onLayout","id":"method-onLayout"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"onRemove","id":"method-onRemove"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"onResize","id":"method-onResize"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{},"name":"parseMargins","id":"method-parseMargins"},{"tagname":"method","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"renderAll","id":"method-renderAll"},{"tagname":"method","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"renderItem","id":"method-renderItem"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"runLayout","id":"method-runLayout"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"setContainer","id":"method-setContainer"},{"tagname":"method","owner":"Ext.layout.BoxLayout","meta":{},"name":"updateChildBoxes","id":"method-updateChildBoxes"},{"tagname":"method","owner":"Ext.layout.BoxLayout","meta":{"private":true},"name":"updateInnerCtSize","id":"method-updateInnerCtSize"}],"event":[],"css_mixin":[]},"inheritable":null,"private":null,"component":false,"name":"Ext.layout.HBoxLayout","singleton":false,"override":null,"inheritdoc":null,"id":"class-Ext.layout.HBoxLayout","mixins":[],"mixedInto":[]});