Previous  Up  Next

Class type Ext_container_AbstractContainer.configs


class type configs = object .. end
Inherits 
method activeItem : 'a. 'a Js.t Js.prop

A string component id or the numeric index of the component that should be initially activated within the container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first item in the container's collection). activeItem only applies to layout styles that can display items one at a time (like Ext.layout.container.Card and Ext.layout.container.Fit).


method autoDestroy : bool Js.t Js.prop

If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually.

Defaults to: true

method baseCls : Js.js_string Js.t Js.prop

The base CSS class to apply to this component's element. This will also be prepended to elements within this component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this component.

Defaults to: Ext.baseCSSPrefix + 'container'

method bubbleEvents : Js.js_string Js.t Js.js_array Js.t Js.prop

An array of events that, when fired, should be bubbled to any parent container. See Ext.util.Observable.enableBubble.


method defaultType : Js.js_string Js.t Js.prop

The default xtype of child Components to create in this Container when a child item is specified as a raw configuration object, rather than as an instantiated Component.

Defaults to: "panel"

method defaults : 'b. 'b Js.t Js.prop

This option is a means of applying default settings to all added items whether added through the items config or via the add or insert methods.

Defaults are applied to both config objects and instantiated components conditionally so as not to override existing properties in the item (see Ext.applyIf).

If the defaults option is specified as a function, then the function will be called using this Container as the scope (this reference) and passing the added item as the first parameter. Any resulting object from that call is then applied to the item as default properties.

For example, to automatically apply padding to the body of each of a set of contained Ext.panel.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.

Usage:

defaults: { // defaults are applied to items, not the container
    autoScroll: true
},
items: [
    // default will not be applied here, panel1 will be autoScroll: false
    {
        xtype: 'panel',
        id: 'panel1',
        autoScroll: false
    },
    // this component will have autoScroll: true
    new Ext.panel.Panel({
        id: 'panel2'
    })
]


method detachOnRemove : bool Js.t Js.prop

True to move any component to the detachedBody when the component is removed from this container. This option is only applicable when the component is not destroyed while being removed, see autoDestroy and remove. If this option is set to false, the DOM of the component will remain in the current place until it is explicitly moved.

Defaults to: true

method items : 'c. 'c Js.t Js.prop

A single item, or an array of child Components to be added to this container

Unless configured with a layout, a Container simply renders child Components serially into its encapsulating element and performs no sizing or positioning upon them.

Example:

// specifying a single item
items: {...},
layout: 'fit',    // The single items is sized to fit

// specifying multiple items
items: [{...}, {...}],
layout: 'hbox', // The items are arranged horizontally

Each item may be:

If a configuration object is specified, the actual type of Component to be instantiated my be indicated by using the xtype option.

Every Component class has its own xtype.

If an xtype is not explicitly specified, the defaultType for the Container is used, which by default is usually panel.

Notes:

Ext uses lazy rendering. Child Components will only be rendered should it become necessary. Items are automatically laid out when they are first shown (no sizing is done while hidden), or in response to a doLayout call.

Do not specify contentEl or html with items.


method layout : 'd. 'd Js.t Js.prop

Important: In order for child items to be correctly sized and positioned, typically a layout manager must be specified through the layout configuration option.

The sizing and positioning of child items is the responsibility of the Container's layout manager which creates and manages the type of layout you have in mind. For example:

If the layout configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the default layout manager will be used which does nothing but render child components sequentially into the Container (no sizing or positioning will be performed in this situation).

layout may be specified as either as an Object or as a String:

Specify as an Object

Example usage:

layout: {
    type: 'vbox',
    align: 'left'
}

Specify as a String

Example usage:

layout: 'vbox'

Configuring the default layout type

If a certain Container class has a default layout (For example a Toolbar with a default Box layout), then to simply configure the default layout, use an object, but without the type property:

xtype: 'toolbar',
layout: {
    pack: 'center'
}


method renderTpl : 'e. 'e Js.t Js.prop

End Definitions

An XTemplate used to create the internal structure inside this Component's encapsulating Element.

You do not normally need to specify this. For the base classes Ext.Component and Ext.container.Container, this defaults to null which means that they will be initially rendered with no internal structure; they render their Element empty. The more specialized Ext JS and Sencha Touch classes which use a more complex DOM structure, provide their own template definitions.

This is intended to allow the developer to create application-specific utility Components with customized internal structure.

Upon rendering, any created child elements may be automatically imported into object properties using the renderSelectors and childEls options.

Defaults to: '{%this.renderContainer(out,values)%}'

method suspendLayout : bool Js.t Js.prop

If true, suspend calls to doLayout. Useful when batching multiple adds to a container and not passing them as multiple arguments or an array.

Defaults to: false

method afterComponentLayout : 'f 'g.
         ((< activeItem : 'a. 'a Js.t Js.prop; afterComponentLayout : 'f 'g. 'h;
             afterHide : 'j 'k.
                           ('i Js.t,
                            'j Js.callback Js.optdef -> 'k Js.t Js.optdef -> unit)
                           Js.meth_callback Js.writeonly_prop;
             afterLayout : 'l.
                             ('i Js.t,
                              (#Ext_layout_container_Container.t as 'l) Js.t -> unit)
                             Js.meth_callback Js.writeonly_prop;
             afterRender : ('i Js.t, unit -> unit) Js.meth_callback
                           Js.writeonly_prop;
             afterSetPosition : ('i Js.t, Js.number Js.t -> Js.number Js.t -> unit)
                                Js.meth_callback Js.writeonly_prop;
             afterShow : 'm 'n 'o.
                           ('i Js.t,
                            'm Js.t Js.optdef ->
                            'n Js.callback Js.optdef -> 'o Js.t Js.optdef -> unit)
                           Js.meth_callback Js.writeonly_prop;
             autoDestroy : bool Js.t Js.prop; autoEl : 'p. 'p Js.t Js.prop;
             autoRender : 'q. 'q Js.t Js.prop; autoScroll : bool Js.t Js.prop;
             autoShow : bool Js.t Js.prop; baseCls : Js.js_string Js.t Js.prop;
             beforeComponentLayout : ('i Js.t,
                                      Js.number Js.t -> Js.number Js.t -> unit)
                                     Js.meth_callback Js.writeonly_prop;
             beforeDestroy : ('i Js.t, unit -> unit) Js.meth_callback
                             Js.writeonly_prop;
             beforeLayout : ('i Js.t, unit -> unit) Js.meth_callback
                            Js.writeonly_prop;
             beforeShow : ('i Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
             border : 'r. 'r Js.t Js.prop;
             bubbleEvents : Js.js_string Js.t Js.js_array Js.t Js.prop;
             childEls : 's. 's Js.t Js.js_array Js.t Js.prop;
             cls : Js.js_string Js.t Js.prop; columnWidth : 't. 't Js.t Js.prop;
             componentCls : Js.js_string Js.t Js.prop;
             componentLayout : 'u. 'u Js.t Js.prop; constrain : bool Js.t Js.prop;
             constrainTo : 'v. 'v Js.t Js.prop;
             constraintInsets : 'w. 'w Js.t Js.prop;
             contentEl : Js.js_string Js.t Js.prop; data : 'x. 'x Js.t Js.prop;
             defaultAlign : Js.js_string Js.t Js.prop;
             defaultType : Js.js_string Js.t Js.prop;
             defaults : 'b. 'b Js.t Js.prop; detachOnRemove : bool Js.t Js.prop;
             disabled : bool Js.t Js.prop; disabledCls : Js.js_string Js.t Js.prop;
             draggable : bool Js.t Js.prop; draggable_obj : 'y. 'y Js.t Js.prop;
             fixed : bool Js.t Js.prop; floating : bool Js.t Js.prop;
             focusOnToFront : bool Js.t Js.prop; formBind : bool Js.t Js.prop;
             frame : bool Js.t Js.prop; height : Js.number Js.t Js.prop;
             hidden : bool Js.t Js.prop; hideMode : Js.js_string Js.t Js.prop;
             html : 'z. 'z Js.t Js.prop; id : Js.js_string Js.t Js.prop;
             initComponent : ('i Js.t, unit -> unit) Js.meth_callback
                             Js.writeonly_prop;
             itemId : Js.js_string Js.t Js.prop; items : 'c. 'c Js.t Js.prop;
             layout : 'd. 'd Js.t Js.prop; listeners : 'a1. 'a1 Js.t Js.prop;
             loader : 'b1. 'b1 Js.t Js.prop; margin : 'c1. 'c1 Js.t Js.prop;
             maxHeight : Js.number Js.t Js.prop; maxWidth : Js.number Js.t Js.prop;
             minHeight : Js.number Js.t Js.prop; minWidth : Js.number Js.t Js.prop;
             onAdd : 'd1.
                       ('i Js.t,
                        (#Ext_Component.t as 'd1) Js.t -> Js.number Js.t -> unit)
                       Js.meth_callback Js.writeonly_prop;
             onAdded : 'e1.
                         ('i Js.t, 'e1 Js.t -> Js.number Js.t -> unit)
                         Js.meth_callback Js.writeonly_prop;
             onBeforeAdd : 'f1.
                             ('i Js.t, (#Ext_Component.t as 'f1) Js.t -> unit)
                             Js.meth_callback Js.writeonly_prop;
             onDestroy : ('i Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
             onDisable : ('i Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
             onEnable : ('i Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
             onHide : 'g1 'h1 'i1.
                        ('i Js.t,
                         'g1 Js.t Js.optdef ->
                         'h1 Js.callback Js.optdef -> 'i1 Js.t Js.optdef -> unit)
                        Js.meth_callback Js.writeonly_prop;
             onPosition : ('i Js.t, Js.number Js.t -> Js.number Js.t -> unit)
                          Js.meth_callback Js.writeonly_prop;
             onRemove : 'j1.
                          ('i Js.t,
                           (#Ext_Component.t as 'j1) Js.t -> bool Js.t -> unit)
                          Js.meth_callback Js.writeonly_prop;
             onRemoved : ('i Js.t, bool Js.t -> unit) Js.meth_callback
                         Js.writeonly_prop;
             onRender : ('i Js.t, Ext_dom_Element.t Js.t -> Js.number Js.t -> unit)
                        Js.meth_callback Js.writeonly_prop;
             onResize : 'k1 'l1 'm1 'n1.
                          ('i Js.t,
                           'k1 Js.t -> 'l1 Js.t -> 'm1 Js.t -> 'n1 Js.t -> unit)
                          Js.meth_callback Js.writeonly_prop;
             onShow : 'o1 'p1 'q1.
                        ('i Js.t,
                         'o1 Js.t Js.optdef ->
                         'p1 Js.callback Js.optdef -> 'q1 Js.t Js.optdef -> unit)
                        Js.meth_callback Js.writeonly_prop;
             onShowComplete : 'r1 's1.
                                ('i Js.t,
                                 'r1 Js.callback Js.optdef ->
                                 's1 Js.t Js.optdef -> unit)
                                Js.meth_callback Js.writeonly_prop;
             overCls : Js.js_string Js.t Js.prop;
             overflowX : Js.js_string Js.t Js.prop;
             overflowY : Js.js_string Js.t Js.prop; padding : 't1. 't1 Js.t Js.prop;
             plugins : 'u1. 'u1 Js.t Js.prop; region : 'v1. 'v1 Js.t Js.prop;
             renderData : 'w1. 'w1 Js.t Js.prop;
             renderSelectors : 'x1. 'x1 Js.t Js.prop;
             renderTo : 'y1. 'y1 Js.t Js.prop; renderTpl : 'e. 'e Js.t Js.prop;
             resizable : 'z1. 'z1 Js.t Js.prop;
             resizeHandles : Js.js_string Js.t Js.prop; rtl : bool Js.t Js.prop;
             saveDelay : Js.number Js.t Js.prop; shadow : 'a2. 'a2 Js.t Js.prop;
             shadowOffset : Js.number Js.t Js.prop;
             shrinkWrap : 'b2. 'b2 Js.t Js.prop;
             stateEvents : Js.js_string Js.t Js.js_array Js.t Js.prop;
             stateId : Js.js_string Js.t Js.prop; stateful : bool Js.t Js.prop;
             style : 'c2. 'c2 Js.t Js.prop; suspendLayout : bool Js.t Js.prop;
             toFrontOnShow : bool Js.t Js.prop; tpl : 'd2. 'd2 Js.t Js.prop;
             tplWriteMode : Js.js_string Js.t Js.prop;
             ui : Js.js_string Js.t Js.prop; width : Js.number Js.t Js.prop;
             xtype : Js.js_string Js.t Js.prop; .. >
           as 'i)
          Js.t, Js.number Js.t -> Js.number Js.t -> 'f Js.t -> 'g Js.t -> unit)
         Js.meth_callback Js.writeonly_prop as 'h
See method t.afterComponentLayout
method afterLayout : 'l.
         ('i Js.t, (#Ext_layout_container_Container.t as 'l) Js.t -> unit)
         Js.meth_callback Js.writeonly_prop
See method t.afterLayout
method onAdd : 'd1.
         ('i Js.t, (#Ext_Component.t as 'd1) Js.t -> Js.number Js.t -> unit)
         Js.meth_callback Js.writeonly_prop
See method t.onAdd
method onBeforeAdd : 'f1.
         ('i Js.t, (#Ext_Component.t as 'f1) Js.t -> unit) Js.meth_callback
         Js.writeonly_prop
See method t.onBeforeAdd
method onPosition : ('i Js.t, Js.number Js.t -> Js.number Js.t -> unit) Js.meth_callback
       Js.writeonly_prop
See method t.onPosition
method onRemove : 'j1.
         ('i Js.t, (#Ext_Component.t as 'j1) Js.t -> bool Js.t -> unit)
         Js.meth_callback Js.writeonly_prop
See method t.onRemove
method onResize : 'k1 'l1 'm1 'n1.
         ('i Js.t, 'k1 Js.t -> 'l1 Js.t -> 'm1 Js.t -> 'n1 Js.t -> unit)
         Js.meth_callback Js.writeonly_prop
See method t.onResize