X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/api/Ext.layout.container.HBox.html diff --git a/docs/api/Ext.layout.container.HBox.html b/docs/api/Ext.layout.container.HBox.html new file mode 100644 index 00000000..8f7b6b61 --- /dev/null +++ b/docs/api/Ext.layout.container.HBox.html @@ -0,0 +1,216 @@ +Ext.layout.container.HBox | Ext JS 4.0 Documentation +
For up to date documentation and features, visit +http://docs.sencha.com/ext-js/4-0

Sencha Documentation

+ + + + + +

Hierarchy

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

+ + +

This layout may also be used to set the heights of child items by configuring it with the align option. +Ext.layout.container.HBox container layout +Example usage:

+ +
Ext.create('Ext.Panel', {
+    width: 500,
+    height: 300,
+    title: "HBoxLayout Panel",
+    layout: {
+        type: 'hbox',
+        align: 'stretch'
+    },
+    renderTo: document.body,
+    items: [{
+        xtype: 'panel',
+        title: 'Inner Panel One',
+        flex: 2
+    },{
+        xtype: 'panel',
+        title: 'Inner Panel Two',
+        flex: 1
+    },{
+        xtype: 'panel',
+        title: 'Inner Panel Three',
+        flex: 1
+    }]
+});
+
+
Defined By

Config Options

CSS Class configs

 
An optional extra CSS class that will be added to the container. This can be useful for adding +customized styles to t...

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

+ + +

+

Other Configs

 
Controls how the child items of the container are aligned. Acceptable configuration values for this +property are: + + +t...

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

+ +
    +
  • top : Default
    child items are aligned vertically +at the top of the container
  • +
  • middle :
    child items are aligned vertically in the +middle of the container
  • +
  • stretch :
    child items are stretched vertically to fill +the height of the container
  • +
  • stretchmax :
    child items are stretched vertically to +the height of the largest item.
  • +
+ +
 
If truthy, child Component are animated into position whenever the Container +is layed out. If this option is numeric,...

If truthy, child Component are animated into position whenever the Container +is layed out. If this option is numeric, it is used as the animation duration in milliseconds.

+ + +

May be set as a property at any time.

+ +
 

Flag to notify the ownerCt Component on afterLayout of a change

+

Flag to notify the ownerCt Component on afterLayout of a change

+
 

Flag to notify the ownerCt Container on afterLayout of a change

+

Flag to notify the ownerCt Container on afterLayout of a change

+
 
If the individual contained items do not have a margins +property specified or margin specified via CSS, the default m...

If the individual contained items do not have a margins +property specified or margin specified via CSS, the default margins from this property will be +applied to each item.

+ + +

This property may be specified as an object containing margins + + +

to apply in the format:

+ +
{
+    top: (top margin),
+    right: (right margin),
+    bottom: (bottom margin),
+    left: (left margin)
+}
+ + +

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

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

Defaults to:

+ + +
{top:0, right:0, bottom:0, left:0}
+
+ +
 
This configuration option is to be applied to child items of the container managed +by this layout. Each child item wi...

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

+
 
An optional extra CSS class that will be added to the container. This can be useful for adding +customized styles to t...

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

+ + +

+
 
Controls how the child items of the container are packed together. Acceptable configuration values +for this property ...

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

+ +
    +
  • start : Default
    child items are packed together at +left side of container
  • +
  • center :
    child items are packed together at +mid-width of container
  • +
  • end :
    child items are packed together at right +side of container
  • +
+ +
 
Sets the padding to be applied to all child items managed by this layout. + + +This property must be specified as a stri...

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

+ + +

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

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

Defaults to: "0"

+ +
Defined By

Methods

 
Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's +...

Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's +base class), or the layout phase (onLayout).

+ +

Returns

  • Array   

    of child components

    +
 
Returns the element into which rendering must take place. Defaults to the owner Container's Ext.AbstractComponent.tar...

Returns the element into which rendering must take place. Defaults to the owner Container's Ext.AbstractComponent.targetEl.

+ + +

May be overridden in layout managers which implement an inner element.

+

Returns

  • Ext.core.Element    +
 

Returns the owner component's resize element.

+

Returns the owner component's resize element.

+

Returns

  • Ext.core.Element    +
 

Resizes and repositions each child component

+

Resizes and repositions each child component

+

Parameters

  • boxes : Array

    The box measurements

    +

Returns

  • void    +
\ No newline at end of file