Class type Ext_AbstractComponent.t

class type t = object .. end

method _isLayoutRoot : bool Js.t Js.prop

Setting this property to true causes the isLayoutRoot method to return true and stop the search for the top-most component for a layout.

Defaults to: false

method contentPaddingProperty : Js.js_string Js.t Js.prop

The name of the padding property that is used by the layout to manage padding. See managePadding

Defaults to: 'padding'

method draggable : bool Js.t Js.readonly_prop

Indicates whether or not the component can be dragged.

Defaults to: false

method frameSize : 'a. 'a Js.t Js.readonly_prop

Indicates the width of any framing elements which were added within the encapsulating element to provide graphical, rounded borders. See the frame config. This property is null if the component is not framed.

This is an object containing the frame width in pixels for all four sides of the Component containing the following properties:

method isComponent : bool Js.t Js.prop

true in this class to identify an object as an instantiated Component, or subclass thereof.

Defaults to: true

method maskOnDisable : bool Js.t Js.prop

This is an internal flag that you use when creating custom components. By default this is set to true which means that every component gets a mask when it's disabled. Components like FieldContainer, FieldSet, Field, Button, Tab override this property to false since they want to implement custom disable logic.

Defaults to: true

method ownerCt : 'b. 'b Js.t Js.readonly_prop

This Component's owner Container (is set automatically when this Component is added to a Container).

Important. This is not a universal upwards navigation pointer. It indicates the Container which owns and manages this Component if any. There are other similar relationships such as the button which activates a menu, or the menu item which activated a submenu, or the column header which activated the column menu.

These differences are abstracted away by the up method.

Note: to access items within the Container see itemId.

method rendered : bool Js.t Js.readonly_prop

Indicates whether or not the component has been rendered.

Defaults to: false

method addCls : 'c.
         'c Js.t ->
         (< _isLayoutRoot : bool Js.t Js.prop; addChildEls : unit Js.meth;
            addCls : 'c. 'd;
            addClsWithUI : 'f 'g. 'f Js.t -> 'g Js.t -> unit Js.meth;
            addEvents : 'h. 'h Js.t -> unit Js.meth;
            addListener : 'i 'j 'k 'l 'm.
                            'i Js.t ->
                            'j Js.callback Js.optdef ->
                            'k Js.t Js.optdef ->
                            'l Js.t Js.optdef -> 'm Js.t Js.meth;
            addManagedListener : 'n 'o 'p 'q 'r 's.
                                   'n Js.t ->
                                   'o Js.t ->
                                   'p Js.callback Js.optdef ->
                                   'q Js.t Js.optdef ->
                                   'r Js.t Js.optdef -> 's Js.t Js.meth;
            addPropertyToState : 't.
                                   't Js.t ->
                                   Js.js_string Js.t ->
                                   Js.js_string Js.t Js.optdef -> bool Js.t Js.meth;
            addStateEvents : 'u. 'u Js.t -> unit Js.meth;
            addUIClsToElement : Js.js_string Js.t -> unit Js.meth;
            afterComponentLayout : 'v 'w.
                                     Js.number Js.t ->
                                     Js.number Js.t ->
                                     'v Js.t -> 'w Js.t -> unit Js.meth;
            afterRender : unit Js.meth;
            afterSetPosition : Js.number Js.t -> Js.number Js.t -> unit Js.meth;
            alignTo : 'x 'y.
                        'x Js.t ->
                        Js.js_string Js.t Js.optdef ->
                        Js.number Js.t Js.js_array Js.t Js.optdef ->
                        'y Js.t Js.optdef -> 'e Js.t Js.meth;
            anchorTo : 'z 'a1 'b1 'c1.
                         'z Js.t ->
                         Js.js_string Js.t Js.optdef ->
                         Js.number Js.t Js.js_array Js.t Js.optdef ->
                         'a1 Js.t Js.optdef ->
                         'b1 Js.t Js.optdef ->
                         'c1 Js.callback Js.optdef -> 'e Js.t Js.meth;
            animate : 'd1 'e1. 'd1 Js.t -> 'e1 Js.t Js.meth;
            applyState : 'f1. 'f1 Js.t -> unit Js.meth;
            beforeBlur : Ext_EventObject.t Js.t -> unit Js.meth;
            beforeComponentLayout : Js.number Js.t -> Js.number Js.t -> unit Js.meth;
            beforeDestroy : unit Js.meth;
            beforeFocus : Ext_EventObject.t Js.t -> unit Js.meth;
            beforeLayout : unit Js.meth;
            calculateConstrainedPosition : 'g1.
                                             'g1 Js.t Js.optdef ->
                                             Js.number Js.t Js.js_array Js.t
                                             Js.optdef ->
                                             bool Js.t Js.optdef ->
                                             Js.number Js.t Js.js_array Js.t
                                             Js.optdef ->
                                             Js.number Js.t Js.js_array Js.t Js.meth;
            callParent : 'h1 'i1. 'h1 Js.t -> 'i1 Js.t Js.meth;
            callSuper : 'j1 'k1. 'j1 Js.t -> 'k1 Js.t Js.meth;
            clearListeners : unit Js.meth; clearManagedListeners : unit Js.meth;
            contentPaddingProperty : Js.js_string Js.t Js.prop;
            destroy : unit Js.meth; disable : bool Js.t Js.optdef -> unit Js.meth;
            doAutoRender : unit Js.meth; doComponentLayout : 'l1. 'l1 Js.t Js.meth;
            draggable : bool Js.t Js.readonly_prop;
            enable : bool Js.t Js.optdef -> unit Js.meth;
            enableBubble : 'm1. 'm1 Js.t -> unit Js.meth;
            ensureAttachedToBody : bool Js.t Js.optdef -> unit Js.meth;
            findPlugin : Js.js_string Js.t -> Ext_AbstractPlugin.t Js.t Js.meth;
            fireEvent : 'n1. Js.js_string Js.t -> 'n1 Js.t -> bool Js.t Js.meth;
            fireEventArgs : 'o1.
                              Js.js_string Js.t ->
                              'o1 Js.t Js.js_array Js.t -> bool Js.t Js.meth;
            frameSize : 'a. 'a Js.t Js.readonly_prop;
            getActiveAnimation : 'p1. 'p1 Js.t Js.meth;
            getAlignToXY : 'q1.
                             'q1 Js.t ->
                             Js.js_string Js.t Js.optdef ->
                             Js.number Js.t Js.js_array Js.t Js.optdef ->
                             Js.number Js.t Js.js_array Js.t Js.meth;
            getAnchorXY : 'r1.
                            Js.js_string Js.t Js.optdef ->
                            bool Js.t Js.optdef ->
                            'r1 Js.t Js.optdef ->
                            Js.number Js.t Js.js_array Js.t Js.meth;
            getBox : 's1.
                       bool Js.t Js.optdef ->
                       bool Js.t Js.optdef -> 's1 Js.t Js.meth;
            getBubbleTarget : 't1. 't1 Js.t Js.meth;
            getConstrainVector : 'u1 'v1.
                                   'u1 Js.t Js.optdef ->
                                   Js.number Js.t Js.js_array Js.t Js.optdef ->
                                   Js.number Js.t Js.js_array Js.t Js.optdef ->
                                   'v1 Js.t Js.meth;
            getEl : Ext_dom_Element.t Js.t Js.meth;
            getHeight : Js.number Js.t Js.meth; getId : Js.js_string Js.t Js.meth;
            getInitialConfig : 'w1. Js.js_string Js.t Js.optdef -> 'w1 Js.t Js.meth;
            getInsertPosition : 'x1. 'x1 Js.t -> Dom_html.element Js.t Js.meth;
            getItemId : Js.js_string Js.t Js.meth;
            getLoader : Ext_ComponentLoader.t Js.t Js.meth;
            getLocalX : Js.number Js.t Js.meth;
            getLocalXY : Js.number Js.t Js.js_array Js.t Js.meth;
            getLocalY : Js.number Js.t Js.meth;
            getOffsetsTo : 'y1. 'y1 Js.t -> Js.number Js.t Js.js_array Js.t Js.meth;
            getPlugin : Js.js_string Js.t -> Ext_AbstractPlugin.t Js.t Js.meth;
            getRegion : Ext_util_Region.t Js.t Js.meth;
            getSize : 'z1. 'z1 Js.t Js.meth;
            getSizeModel : 'a2 'b2. 'a2 Js.t -> 'b2 Js.t Js.meth;
            getState : 'c2. 'c2 Js.t Js.meth;
            getViewRegion : Ext_util_Region.t Js.t Js.meth;
            getWidth : Js.number Js.t Js.meth; getX : Js.number Js.t Js.meth;
            getXTypes : Js.js_string Js.t Js.meth;
            getXY : Js.number Js.t Js.js_array Js.t Js.meth;
            getY : Js.number Js.t Js.meth;
            hasCls : Js.js_string Js.t -> bool Js.t Js.meth;
            hasListener : Js.js_string Js.t -> bool Js.t Js.meth;
            hasListeners : 'd2. 'd2 Js.t Js.readonly_prop;
            hasUICls : Js.js_string Js.t -> unit Js.meth;
            initConfig : 'e2. 'e2 Js.t -> 'e Js.t Js.meth;
            initEvents : unit Js.meth; initRenderData : 'f2. 'f2 Js.t Js.meth;
            is : Js.js_string Js.t -> bool Js.t Js.meth;
            isComponent : bool Js.t Js.prop;
            isDescendantOf : 'g2. 'g2 Js.t -> bool Js.t Js.meth;
            isDisabled : bool Js.t Js.meth; isDraggable : bool Js.t Js.meth;
            isDroppable : bool Js.t Js.meth; isFloating : bool Js.t Js.meth;
            isHidden : bool Js.t Js.meth; isLayoutRoot : unit Js.meth;
            isLayoutSuspended : bool Js.t Js.meth; isObservable : bool Js.t Js.prop;
            isVisible : bool Js.t Js.optdef -> bool Js.t Js.meth;
            isXType : Js.js_string Js.t -> bool Js.t Js.optdef -> bool Js.t Js.meth;
            maskOnDisable : bool Js.t Js.prop;
            mon : 'h2 'i2 'j2 'k2 'l2 'm2.
                    'h2 Js.t ->
                    'i2 Js.t ->
                    'j2 Js.callback Js.optdef ->
                    'k2 Js.t Js.optdef -> 'l2 Js.t Js.optdef -> 'm2 Js.t Js.meth;
            move : 'n2.
                     Js.js_string Js.t ->
                     Js.number Js.t -> 'n2 Js.t Js.optdef -> unit Js.meth;
            mun : 'o2 'p2 'q2 'r2.
                    'o2 Js.t ->
                    'p2 Js.t ->
                    'q2 Js.callback Js.optdef -> 'r2 Js.t Js.optdef -> unit Js.meth;
            nextNode : Js.js_string Js.t Js.optdef -> 'e Js.t Js.meth;
            nextSibling : Js.js_string Js.t Js.optdef -> 'e Js.t Js.meth;
            on : 's2 't2 'u2 'v2 'w2.
                   's2 Js.t ->
                   't2 Js.callback Js.optdef ->
                   'u2 Js.t Js.optdef -> 'v2 Js.t Js.optdef -> 'w2 Js.t Js.meth;
            onAdded : 'x2. 'x2 Js.t -> Js.number Js.t -> unit Js.meth;
            onDisable : unit Js.meth; onEnable : unit Js.meth;
            onPosition : Js.number Js.t -> Js.number Js.t -> unit Js.meth;
            onRemoved : bool Js.t -> unit Js.meth;
            onRender : Ext_dom_Element.t Js.t -> Js.number Js.t -> unit Js.meth;
            onResize : 'y2 'z2 'a3 'b3.
                         'y2 Js.t ->
                         'z2 Js.t -> 'a3 Js.t -> 'b3 Js.t -> unit Js.meth;
            ownerCt : 'b. 'b Js.t Js.readonly_prop;
            postBlur : Ext_EventObject.t Js.t -> unit Js.meth;
            previousNode : Js.js_string Js.t Js.optdef -> 'e Js.t Js.meth;
            previousSibling : Js.js_string Js.t Js.optdef -> 'e Js.t Js.meth;
            registerFloatingItem : 'c3. 'c3 Js.t -> unit Js.meth;
            relayEvents : 'd3 'e3.
                            'd3 Js.t ->
                            Js.js_string Js.t Js.js_array Js.t ->
                            Js.js_string Js.t Js.optdef -> 'e3 Js.t Js.meth;
            removeAnchor : 'e Js.t Js.meth;
            removeChildEls : 'f3. 'f3 Js.callback -> unit Js.meth;
            removeCls : 'g3. 'g3 Js.t -> 'e Js.t Js.meth;
            removeClsWithUI : 'h3. 'h3 Js.t -> unit Js.meth;
            removeListener : 'i3 'j3.
                               Js.js_string Js.t ->
                               'i3 Js.callback -> 'j3 Js.t Js.optdef -> unit Js.meth;
            removeManagedListener : 'k3 'l3 'm3 'n3.
                                      'k3 Js.t ->
                                      'l3 Js.t ->
                                      'm3 Js.callback Js.optdef ->
                                      'n3 Js.t Js.optdef -> unit Js.meth;
            removeUIClsFromElement : Js.js_string Js.t -> unit Js.meth;
            render : 'o3 'p3.
                       'o3 Js.t Js.optdef -> 'p3 Js.t Js.optdef -> unit Js.meth;
            rendered : bool Js.t Js.readonly_prop;
            resumeEvent : Js.js_string Js.t -> unit Js.meth;
            resumeEvents : unit Js.meth;
            savePropToState : 'q3.
                                Js.js_string Js.t ->
                                'q3 Js.t ->
                                Js.js_string Js.t Js.optdef -> bool Js.t Js.meth;
            savePropsToState : 'r3 's3 't3. 'r3 Js.t -> 's3 Js.t -> 't3 Js.t Js.meth;
            saveState : unit Js.meth; self : Ext_Class.t Js.t Js.prop;
            sequenceFx : 'u3. 'u3 Js.t Js.meth;
            setBorder : 'v3. 'v3 Js.t -> unit Js.meth;
            setBox : 'w3 'x3. 'w3 Js.t -> 'x3 Js.t Js.optdef -> 'e Js.t Js.meth;
            setDisabled : bool Js.t -> unit Js.meth;
            setDocked : 'y3. 'y3 Js.t -> bool Js.t Js.optdef -> 'e Js.t Js.meth;
            setHeight : Js.number Js.t -> 'e Js.t Js.meth;
            setLocalX : Js.number Js.t -> 'e Js.t Js.meth;
            setLocalXY : 'z3.
                           'z3 Js.t -> Js.number Js.t Js.optdef -> 'e Js.t Js.meth;
            setLocalY : Js.number Js.t -> 'e Js.t Js.meth;
            setMargin : 'a4. 'a4 Js.t -> unit Js.meth;
            setRegion : 'b4.
                          Ext_util_Region.t Js.t ->
                          'b4 Js.t Js.optdef -> 'e Js.t Js.meth;
            setSize : 'c4 'd4. 'c4 Js.t -> 'd4 Js.t -> 'e Js.t Js.meth;
            setUI : Js.js_string Js.t -> unit Js.meth;
            setVisible : bool Js.t -> 'e Js.t Js.meth;
            setWidth : Js.number Js.t -> 'e Js.t Js.meth;
            setX : 'e4. Js.number Js.t -> 'e4 Js.t Js.optdef -> 'e Js.t Js.meth;
            setXY : 'f4.
                      Js.number Js.t Js.js_array Js.t ->
                      'f4 Js.t Js.optdef -> 'e Js.t Js.meth;
            setY : 'g4. Js.number Js.t -> 'g4 Js.t Js.optdef -> 'e Js.t Js.meth;
            statics : Ext_Class.t Js.t Js.meth;
            stopAnimation : Ext_dom_Element.t Js.t Js.meth;
            suspendEvent : Js.js_string Js.t -> unit Js.meth;
            suspendEvents : bool Js.t -> unit Js.meth;
            syncFx : 'h4. 'h4 Js.t Js.meth;
            translatePoints : 'i4 'j4.
                                'i4 Js.t ->
                                Js.number Js.t Js.optdef -> 'j4 Js.t Js.meth;
            un : 'k4 'l4.
                   Js.js_string Js.t ->
                   'k4 Js.callback -> 'l4 Js.t Js.optdef -> unit Js.meth;
            up : 'm4 'n4 'o4.
                   'm4 Js.t Js.optdef -> 'n4 Js.t Js.optdef -> 'o4 Js.t Js.meth;
            update : 'p4 'q4.
                       'p4 Js.t ->
                       bool Js.t Js.optdef ->
                       'q4 Js.callback Js.optdef -> unit Js.meth;
            updateLayout : 'r4. 'r4 Js.t Js.optdef -> unit Js.meth; .. >
          as 'e)
         Js.t Js.meth as 'd

Adds a CSS class to the top level element representing this component.

Parameters:

• cls: _ Js.t

  The CSS class name to add.

Returns:

• #Ext_Component.t Js.t

  Returns the Component to allow method chaining.

method addClsWithUI : 'f 'g. 'f Js.t -> 'g Js.t -> unit Js.meth

Adds a cls to the uiCls array, which will also call addUIClsToElement and adds to all elements of this component.

Parameters:

• classes: _ Js.t

  A string or an array of strings to add to the uiCls.

• skip: _ Js.t

  (Boolean) skip true to skip adding it to the class and do it later (via the return).

method addListener : 'i 'j 'k 'l 'm.
         'i Js.t ->
         'j Js.callback Js.optdef ->
         'k Js.t Js.optdef -> 'l Js.t Js.optdef -> 'm Js.t Js.meth

Appends an event handler to this object. For example:

myGridPanel.on("mouseover", this.onMouseOver, this);

The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:

myGridPanel.on({
    cellClick: this.onCellClick,
    mouseover: this.onMouseOver,
    mouseout: this.onMouseOut,
    scope: this // Important. Ensure "this" is correct during handler execution
});

One can also specify options for each event handler separately:

myGridPanel.on({
    cellClick: {fn: this.onCellClick, scope: this, single: true},
    mouseover: {fn: panel.onMouseOver, scope: panel}
});

Names of methods in a specified scope may also be used. Note that scope MUST be specified to use this option:

myGridPanel.on({
    cellClick: {fn: 'onCellClick', scope: this, single: true},
    mouseover: {fn: 'onMouseOver', scope: panel}
});

Parameters:

• eventName: _ Js.t

  The name of the event to listen for. May also be an object who's property names are event names.

• fn: _ Js.callback (optional)

  The method the event invokes, or if scope is specified, the name* of the method within the specified scope. Will be called with arguments given to Ext.util.Observable.fireEvent plus the options parameter described below.

• scope: _ Js.t (optional)

  The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.

• options: _ Js.t (optional)

  An object containing handler configuration.

  Note: Unlike in ExtJS 3.x, the options object will also be passed as the last argument to every event handler.

  This object may contain any of the following properties:

Returns:

• _ Js.t

  Only when the destroyable option is specified.

  A Destroyable object. An object which implements the destroy method which removes all listeners added in this call. For example:

  this.btnListeners =  = myButton.on({
      destroyable: true
      mouseover:   function() { console.log('mouseover'); },
      mouseout:    function() { console.log('mouseout'); },
      click:       function() { console.log('click'); }
  });
  

  And when those listeners need to be removed:

  Ext.destroy(this.btnListeners);
  

  or

  this.btnListeners.destroy();
  

method addPropertyToState : 't.
         't Js.t ->
         Js.js_string Js.t -> Js.js_string Js.t Js.optdef -> bool Js.t Js.meth

Save a property to the given state object if it is not its default or configured value.

Parameters:

• state: _ Js.t

  The state object.

• propName: Js.js_string Js.t

  The name of the property on this object to save.

• value: Js.js_string Js.t (optional)

  The value of the state property (defaults to this[propName]).

Returns:

• bool Js.t

  The state object or a new object if state was null and the property was saved.

method addUIClsToElement : Js.js_string Js.t -> unit Js.meth

Method which adds a specified UI + uiCls to the components element. Can be overridden to remove the UI from more than just the components element.

Parameters:

• ui: Js.js_string Js.t

  The UI to remove from the element.

method afterComponentLayout : 'v 'w. Js.number Js.t -> Js.number Js.t -> 'v Js.t -> 'w Js.t -> unit Js.meth

Called by the layout system after the Component has been laid out.

Parameters:

• width: Js.number Js.t

  The width that was set

• height: Js.number Js.t

  The height that was set

• oldWidth: _ Js.t

  The old width, or undefined if this was the initial layout.

• oldHeight: _ Js.t

  The old height, or undefined if this was the initial layout.

method afterSetPosition : Js.number Js.t -> Js.number Js.t -> unit Js.meth

Template method called after a Component has been positioned.

Parameters:

• x: Js.number Js.t
• y: Js.number Js.t

method animate : 'd1 'e1. 'd1 Js.t -> 'e1 Js.t Js.meth

Performs custom animation on this object.

This method is applicable to both the Component class and the Sprite class. It performs animated transitions of certain properties of this object over a specified timeline.

Animating a Component

When animating a Component, the following properties may be specified in from, to, and keyframe objects:

• x - The Component's page X position in pixels.

• y - The Component's page Y position in pixels

• left - The Component's left value in pixels.

• top - The Component's top value in pixels.

• width - The Component's width value in pixels.

• height - The Component's height value in pixels.

• dynamic - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.

For example, to animate a Window to a new size, ensuring that its internal layout and any shadow is correct:

myWindow = Ext.create('Ext.window.Window', {
    title: 'Test Component animation',
    width: 500,
    height: 300,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        title: 'Left: 33%',
        margins: '5 0 5 5',
        flex: 1
    }, {
        title: 'Left: 66%',
        margins: '5 5 5 5',
        flex: 2
    }]
});
myWindow.show();
myWindow.header.el.on('click', function() {
    myWindow.animate({
        to: {
            width: (myWindow.getWidth() == 500) ? 700 : 500,
            height: (myWindow.getHeight() == 300) ? 400 : 300
        }
    });
});

For performance reasons, by default, the internal layout is only updated when the Window reaches its final "to" size. If dynamic updating of the Window's child Components is required, then configure the animation with dynamic: true and the two child items will maintain their proportions during the animation.

Parameters:

• config: _ Js.t

  Configuration for Ext.fx.Anim. Note that the to config is required.

Returns:

• _ Js.t

  this

method beforeBlur : Ext_EventObject.t Js.t -> unit Js.meth

Template method to do any pre-blur processing.

Parameters:

• e: Ext_EventObject.t Js.t

  The event object

method beforeComponentLayout : Js.number Js.t -> Js.number Js.t -> unit Js.meth

Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from being executed.

Parameters:

• adjWidth: Js.number Js.t

  The box-adjusted width that was set.

• adjHeight: Js.number Js.t

  The box-adjusted height that was set.

method beforeDestroy : unit Js.meth

Invoked before the Component is destroyed.

method beforeFocus : Ext_EventObject.t Js.t -> unit Js.meth

Template method to do any pre-focus processing.

Parameters:

• e: Ext_EventObject.t Js.t

  The event object

method beforeLayout : unit Js.meth

Occurs before componentLayout is run. In previous releases, this method could return false to prevent its layout but that is not supported in Ext JS 4.1 or higher. This method is simply a notification of the impending layout to give the component a chance to adjust the DOM. Ideally, DOM reads should be avoided at this time to reduce expensive document reflows.

method destroy : unit Js.meth

Destroys the Component.

method disable : bool Js.t Js.optdef -> unit Js.meth

Disable the component.

Parameters:

• silent: bool Js.t (optional)

  Passing true will suppress the disable event from being fired.

  Defaults to: false

method doComponentLayout : 'l1. 'l1 Js.t Js.meth

This method needs to be called whenever you change something on this component that requires the Component's layout to be recalculated.

Returns:

• #Ext_container_Container.t Js.t

  this

method enable : bool Js.t Js.optdef -> unit Js.meth

Enable the component

Parameters:

• silent: bool Js.t (optional)

  Passing true will suppress the enable event from being fired.

  Defaults to: false

method findPlugin : Js.js_string Js.t -> Ext_AbstractPlugin.t Js.t Js.meth

Retrieves plugin from this component's collection by its ptype.

Parameters:

• ptype: Js.js_string Js.t

  The Plugin's ptype as specified by the class's alias configuration.

Returns:

• Ext_AbstractPlugin.t Js.t

  plugin instance.

method getBubbleTarget : 't1. 't1 Js.t Js.meth

Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.

Returns:

• #Ext_container_Container.t Js.t

  the Container which owns this Component.

method getEl : Ext_dom_Element.t Js.t Js.meth

Retrieves the top level element representing this component.

method getHeight : Js.number Js.t Js.meth

Gets the current height of the component's underlying element.

method getId : Js.js_string Js.t Js.meth

Retrieves the id of this component. Will auto-generate an id if one has not already been set.

method getItemId : Js.js_string Js.t Js.meth

Returns the value of itemId assigned to this component, or when that is not set, returns the value of id.

method getLoader : Ext_ComponentLoader.t Js.t Js.meth

Gets the Ext.ComponentLoader for this Component.

Returns:

• Ext_ComponentLoader.t Js.t

  The loader instance, null if it doesn't exist.

method getLocalX : Js.number Js.t Js.meth

Overridden in Ext.rtl.AbstractComponent.

Returns the x coordinate of this element reletive to its offsetParent.

Returns:

• Js.number Js.t

  The local x coordinate

method getLocalXY : Js.number Js.t Js.js_array Js.t Js.meth

Overridden in Ext.rtl.AbstractComponent.

Returns the x and y coordinates of this element relative to its offsetParent.

Returns:

• Js.number Js.t Js.js_array Js.t

  The local XY position of the element

method getLocalY : Js.number Js.t Js.meth

Returns the y coordinate of this element reletive to its offsetParent.

Returns:

• Js.number Js.t

  The local y coordinate

method getPlugin : Js.js_string Js.t -> Ext_AbstractPlugin.t Js.t Js.meth

Retrieves a plugin from this component's collection by its pluginId.

Parameters:

• pluginId: Js.js_string Js.t

Returns:

• Ext_AbstractPlugin.t Js.t

  plugin instance.

method getSize : 'z1. 'z1 Js.t Js.meth

Gets the current size of the component's underlying element.

Returns:

• _ Js.t

  An object containing the element's size {width: (element width), height: (element height)}

method getSizeModel : 'a2 'b2. 'a2 Js.t -> 'b2 Js.t Js.meth

Returns an object that describes how this component's width and height are managed. All of these objects are shared and should not be modified.

Parameters:

• ownerCtSizeModel: _ Js.t

Returns:

• _ Js.t

  The size model for this component.

method getState : 'c2. 'c2 Js.t Js.meth

The supplied default state gathering method for the AbstractComponent class.

This method returns dimension settings such as flex, anchor, width and height along with collapsed state.

Subclasses which implement more complex state should call the superclass's implementation, and apply their state to the result if this basic state is to be saved.

Note that Component state will only be saved if the Component has a stateId and there as a StateProvider configured for the document.

method getWidth : Js.number Js.t Js.meth

Gets the current width of the component's underlying element.

method getX : Js.number Js.t Js.meth

Gets the current X position of the DOM element based on page coordinates.

Returns:

• Js.number Js.t

  The X position of the element

method getXTypes : Js.js_string Js.t Js.meth

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

Example usage:

var t = new Ext.form.field.Text();
alert(t.getXTypes());  // alerts 'component/field/textfield'

Returns:

• Js.js_string Js.t

  The xtype hierarchy string

method getXY : Js.number Js.t Js.js_array Js.t Js.meth

Gets the current position of the DOM element based on page coordinates.

Returns:

• Js.number Js.t Js.js_array Js.t

  The XY position of the element

method getY : Js.number Js.t Js.meth

Gets the current Y position of the DOM element based on page coordinates.

Returns:

• Js.number Js.t

  The Y position of the element

method hasCls : Js.js_string Js.t -> bool Js.t Js.meth

Checks if the specified CSS class exists on this element's DOM node.

Parameters:

• className: Js.js_string Js.t

  The CSS class to check for.

Returns:

• bool Js.t

  true if the class exists, else false.

method hasUICls : Js.js_string Js.t -> unit Js.meth

Checks if there is currently a specified uiCls.

Parameters:

• cls: Js.js_string Js.t

  The cls to check.

method initEvents : unit Js.meth

Initialize any events on this component

method is : Js.js_string Js.t -> bool Js.t Js.meth

Tests whether this Component matches the selector string.

Parameters:

• selector: Js.js_string Js.t

  The selector string to test against.

Returns:

• bool Js.t

  true if this Component matches the selector.

method isDescendantOf : 'g2. 'g2 Js.t -> bool Js.t Js.meth

Determines whether this component is the descendant of a particular container.

Parameters:

• container: Ext_container_Container.t Js.t

Returns:

• bool Js.t

  true if the component is the descendant of a particular container, otherwise false.

method isDisabled : bool Js.t Js.meth

Method to determine whether this Component is currently disabled.

Returns:

• bool Js.t

  the disabled state of this Component.

method isDraggable : bool Js.t Js.meth

Method to determine whether this Component is draggable.

Returns:

• bool Js.t

  the draggable state of this component.

method isDroppable : bool Js.t Js.meth

Method to determine whether this Component is droppable.

Returns:

• bool Js.t

  the droppable state of this component.

method isFloating : bool Js.t Js.meth

Method to determine whether this Component is floating.

Returns:

• bool Js.t

  the floating state of this component.

method isHidden : bool Js.t Js.meth

Method to determine whether this Component is currently set to hidden.

Returns:

• bool Js.t

  the hidden state of this Component.

method isLayoutRoot : unit Js.meth

Determines whether this Component is the root of a layout. This returns true if this component can run its layout without assistance from or impact on its owner. If this component cannot run its layout given these restrictions, false is returned and its owner will be considered as the next candidate for the layout root.

Setting the _isLayoutRoot property to true causes this method to always return true. This may be useful when updating a layout of a Container which shrink wraps content, and you know that it will not change size, and so can safely be the topmost participant in the layout run.

method isLayoutSuspended : bool Js.t Js.meth

Returns true if layout is suspended for this component. This can come from direct suspension of this component's layout activity (Ext.Container.suspendLayout) or if one of this component's containers is suspended.

Returns:

• bool Js.t

  true layout of this component is suspended.

method isVisible : bool Js.t Js.optdef -> bool Js.t Js.meth

Returns true if this component is visible.

Parameters:

• deep: bool Js.t (optional)

  Pass true to interrogate the visibility status of all parent Containers to determine whether this Component is truly visible to the user.

  Generally, to determine whether a Component is hidden, the no argument form is needed. For example when creating dynamically laid out UIs in a hidden Container before showing them.

  Defaults to: false

Returns:

• bool Js.t

  true if this component is visible, false otherwise.

method isXType : Js.js_string Js.t -> bool Js.t Js.optdef -> bool Js.t Js.meth

Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from the xtype (default) or whether it is directly of the xtype specified (shallow = true).

If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

For a list of all available xtypes, see the Ext.Component header.

Example usage:

var t = new Ext.form.field.Text();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('field');       // true, descended from Ext.form.field.Base
var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.field.Base instance

Parameters:

• xtype: Js.js_string Js.t

  The xtype to check for this Component

• shallow: bool Js.t (optional)

  true to check whether this Component is directly of the specified xtype, false to check whether this Component is descended from the xtype.

  Defaults to: false

Returns:

• bool Js.t

  true if this component descends from the specified xtype, false otherwise.

method nextNode : Js.js_string Js.t Js.optdef -> 'e Js.t Js.meth

Returns the next node in the Component tree in tree traversal order.

Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree to attempt to find a match. Contrast with nextSibling.

Parameters:

• selector: Js.js_string Js.t (optional)

  A ComponentQuery selector to filter the following nodes.

Returns:

• #Ext_Component.t Js.t

  The next node (or the next node which matches the selector). Returns null if there is no matching node.

method nextSibling : Js.js_string Js.t Js.optdef -> 'e Js.t Js.meth

Returns the next sibling of this Component.

Optionally selects the next sibling which matches the passed ComponentQuery selector.

May also be referred to as next()

Note that this is limited to siblings, and if no siblings of the item match, null is returned. Contrast with nextNode

Parameters:

• selector: Js.js_string Js.t (optional)

  A ComponentQuery selector to filter the following items.

Returns:

• #Ext_Component.t Js.t

  The next sibling (or the next sibling which matches the selector). Returns null if there is no matching sibling.

method onAdded : 'x2. 'x2 Js.t -> Js.number Js.t -> unit Js.meth

Method to manage awareness of when components are added to their respective Container, firing an added event. References are established at add time rather than at render time.

Allows addition of behavior when a Component is added to a Container. At this stage, the Component is in the parent Container's collection of child items. After calling the superclass's onAdded, the ownerCt reference will be present, and if configured with a ref, the refOwner will be set.

Parameters:

• container: #Ext_container_Container.t Js.t

  Container which holds the component.

• pos: Js.number Js.t

  Position at which the component was added.

method onDisable : unit Js.meth

Allows addition of behavior to the disable operation. After calling the superclass's onDisable, the Component will be disabled.

method onEnable : unit Js.meth

Allows addition of behavior to the enable operation. After calling the superclass's onEnable, the Component will be enabled.

method onPosition : Js.number Js.t -> Js.number Js.t -> unit Js.meth

Called after the component is moved, this method is empty by default but can be implemented by any subclass that needs to perform custom logic after a move occurs.

Parameters:

• x: Js.number Js.t

  The new x position.

• y: Js.number Js.t

  The new y position.

method onRemoved : bool Js.t -> unit Js.meth

Method to manage awareness of when components are removed from their respective Container, firing a removed event. References are properly cleaned up after removing a component from its owning container.

Allows addition of behavior when a Component is removed from its parent Container. At this stage, the Component has been removed from its parent Container's collection of child items, but has not been destroyed (It will be destroyed if the parent Container's autoDestroy is true, or if the remove call was passed a truthy second parameter). After calling the superclass's onRemoved, the ownerCt and the refOwner will not be present.

Parameters:

• destroying: bool Js.t

  Will be passed as true if the Container performing the remove operation will delete this Component upon remove.

method onResize : 'y2 'z2 'a3 'b3. 'y2 Js.t -> 'z2 Js.t -> 'a3 Js.t -> 'b3 Js.t -> unit Js.meth

Allows addition of behavior to the resize operation.

Called when Ext.resizer.Resizer#drag event is fired.

Parameters:

• width: _ Js.t
• height: _ Js.t
• oldWidth: _ Js.t
• oldHeight: _ Js.t

method postBlur : Ext_EventObject.t Js.t -> unit Js.meth

Template method to do any post-blur processing.

Parameters:

• e: Ext_EventObject.t Js.t

  The event object

method previousNode : Js.js_string Js.t Js.optdef -> 'e Js.t Js.meth

Returns the previous node in the Component tree in tree traversal order.

Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree in reverse order to attempt to find a match. Contrast with previousSibling.

Parameters:

• selector: Js.js_string Js.t (optional)

  A ComponentQuery selector to filter the preceding nodes.

Returns:

• #Ext_Component.t Js.t

  The previous node (or the previous node which matches the selector). Returns null if there is no matching node.

method previousSibling : Js.js_string Js.t Js.optdef -> 'e Js.t Js.meth

Returns the previous sibling of this Component.

Optionally selects the previous sibling which matches the passed ComponentQuery selector.

May also be referred to as prev()

Note that this is limited to siblings, and if no siblings of the item match, null is returned. Contrast with previousNode

Parameters:

• selector: Js.js_string Js.t (optional)

  A ComponentQuery selector to filter the preceding items.

Returns:

• #Ext_Component.t Js.t

  The previous sibling (or the previous sibling which matches the selector). Returns null if there is no matching sibling.

method registerFloatingItem : 'c3. 'c3 Js.t -> unit Js.meth

Called by Component#doAutoRender

Register a Container configured floating: true with this Component's ZIndexManager.

Components added in this way will not participate in any layout, but will be rendered upon first show in the way that Windows are.

Parameters:

• cmp: _ Js.t

method removeCls : 'g3. 'g3 Js.t -> 'e Js.t Js.meth

Removes a CSS class from the top level element representing this component.

Parameters:

• cls: _ Js.t

  The CSS class name to remove.

Returns:

• #Ext_Component.t Js.t

  Returns the Component to allow method chaining.

method removeClsWithUI : 'h3. 'h3 Js.t -> unit Js.meth

Removes a cls to the uiCls array, which will also call removeUIClsFromElement and removes it from all elements of this component.

Parameters:

• cls: _ Js.t

  A string or an array of strings to remove to the uiCls.

method removeUIClsFromElement : Js.js_string Js.t -> unit Js.meth

Method which removes a specified UI + uiCls from the components element. The cls which is added to the element will be: this.baseCls + '-' + ui.

Parameters:

• ui: Js.js_string Js.t

  The UI to add to the element.

method setBorder : 'v3. 'v3 Js.t -> unit Js.meth

method setDisabled : bool Js.t -> unit Js.meth

Enable or disable the component.

Parameters:

• disabled: bool Js.t

  true to disable.

method setDocked : 'y3. 'y3 Js.t -> bool Js.t Js.optdef -> 'e Js.t Js.meth

Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part of the dockedItems collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default)

Parameters:

• dock: _ Js.t

  The dock position.

• layoutParent: bool Js.t (optional)

  true to re-layout parent.

  Defaults to: false

Returns:

• #Ext_Component.t Js.t

  this

method setHeight : Js.number Js.t -> 'e Js.t Js.meth

Sets the height of the component. This method fires the resize event.

Parameters:

• height: Js.number Js.t

  The new height to set. This may be one of:

  • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
  • A String used to set the CSS height style.
  • undefined to leave the height unchanged.

Returns:

• #Ext_Component.t Js.t

  this

method setLocalX : Js.number Js.t -> 'e Js.t Js.meth

Overridden in Ext.rtl.AbstractComponent.

Sets the local x coordinate of this element using CSS style. When used on an absolute positioned element this method is symmetrical with getLocalX, but may not be symmetrical when used on a relatively positioned element.

Parameters:

• x: Js.number Js.t

  The x coordinate. A value of null sets the left style to 'auto'.

Returns:

• Ext_util_Positionable.t Js.t

  this

method setLocalXY : 'z3. 'z3 Js.t -> Js.number Js.t Js.optdef -> 'e Js.t Js.meth

Overridden in Ext.rtl.AbstractComponent.

Sets the local x and y coordinates of this element using CSS style. When used on an absolute positioned element this method is symmetrical with getLocalXY, but may not be symmetrical when used on a relatively positioned element.

Parameters:

• x: _ Js.t

  The x coordinate or an array containing [x, y]. A value of null sets the left style to 'auto'

• y: Js.number Js.t (optional)

  The y coordinate, required if x is not an array. A value of null sets the top style to 'auto'

Returns:

• Ext_util_Positionable.t Js.t

  this

method setLocalY : Js.number Js.t -> 'e Js.t Js.meth

Sets the local y coordinate of this element using CSS style. When used on an absolute positioned element this method is symmetrical with getLocalY, but may not be symmetrical when used on a relatively positioned element.

Parameters:

• y: Js.number Js.t

  The y coordinate. A value of null sets the top style to 'auto'.

Returns:

• Ext_util_Positionable.t Js.t

  this

method setMargin : 'a4. 'a4 Js.t -> unit Js.meth

Sets the margin on the target element.

Parameters:

• margin: _ Js.t

  The margin to set. See the margin config.

method setSize : 'c4 'd4. 'c4 Js.t -> 'd4 Js.t -> 'e Js.t Js.meth

Sets the width and height of this Component. This method fires the resize event. This method can accept either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.

Parameters:

• width: _ Js.t

  The new width to set. This may be one of:

  • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
  • A String used to set the CSS width style.
  • A size object in the format {width: widthValue, height: heightValue}.
  • undefined to leave the width unchanged.
• height: _ Js.t

  The new height to set (not required if a size object is passed as the first arg). This may be one of:

  • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
  • A String used to set the CSS height style. Animation may not be used.
  • undefined to leave the height unchanged.

Returns:

• #Ext_Component.t Js.t

  this

method setUI : Js.js_string Js.t -> unit Js.meth

Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any uiCls set on the component and rename them so they include the new UI.

Parameters:

• ui: Js.js_string Js.t

  The new UI for the component.

method setVisible : bool Js.t -> 'e Js.t Js.meth

Convenience function to hide or show this component by Boolean.

Parameters:

• visible: bool Js.t

  true to show, false to hide.

Returns:

• #Ext_Component.t Js.t

  this

method setWidth : Js.number Js.t -> 'e Js.t Js.meth

Sets the width of the component. This method fires the resize event.

Parameters:

• width: Js.number Js.t

  The new width to setThis may be one of:

  • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
  • A String used to set the CSS width style.

Returns:

• #Ext_Component.t Js.t

  this

method setX : 'e4. Js.number Js.t -> 'e4 Js.t Js.optdef -> 'e Js.t Js.meth

Sets the X position of the DOM element based on page coordinates.

Parameters:

• the: Js.number Js.t

  X position

• animate: _ Js.t (optional)

  True for the default animation, or a standard Element animation config object

Returns:

• Ext_util_Positionable.t Js.t

  this

method setXY : 'f4. Js.number Js.t Js.js_array Js.t -> 'f4 Js.t Js.optdef -> 'e Js.t Js.meth

Sets the position of the DOM element in page coordinates.

Parameters:

• pos: Js.number Js.t Js.js_array Js.t

  Contains X & Y [x, y] values for new position (coordinates are page-based)

• animate: _ Js.t (optional)

  True for the default animation, or a standard Element animation config object

Returns:

• Ext_util_Positionable.t Js.t

  this

method setY : 'g4. Js.number Js.t -> 'g4 Js.t Js.optdef -> 'e Js.t Js.meth

Sets the Y position of the DOM element based on page coordinates.

Parameters:

• the: Js.number Js.t

  Y position

• animate: _ Js.t (optional)

  True for the default animation, or a standard Element animation config object

Returns:

• Ext_util_Positionable.t Js.t

  this

method up : 'm4 'n4 'o4. 'm4 Js.t Js.optdef -> 'n4 Js.t Js.optdef -> 'o4 Js.t Js.meth

Navigates up the ownership hierarchy searching for an ancestor Container which matches any passed simple selector or component.

Important. There is not a universal upwards navigation pointer. There are several upwards relationships such as the button which activates a menu, or the menu item which activated a submenu, or the column header which activated the column menu.

These differences are abstracted away by this method.

Example:

var owningTabPanel = grid.up('tabpanel');

Parameters:

• selector: _ Js.t (optional)

  The simple selector component or actual component to test. If not passed the immediate owner/activater is returned.

• limit: _ Js.t (optional)

  This may be a selector upon which to stop the upward scan, or a limit of teh number of steps, or Component reference to stop on.

Returns:

• #Ext_container_Container.t Js.t

  The matching ancestor Container (or undefined if no match was found).

method update : 'p4 'q4.
         'p4 Js.t ->
         bool Js.t Js.optdef -> 'q4 Js.callback Js.optdef -> unit Js.meth

Update the content area of a component.

Parameters:

• htmlOrData: _ Js.t

  If this component has been configured with a template via the tpl config then it will use this argument as data to populate the template. If this component was not configured with a template, the components content area will be updated via Ext.Element update.

• loadScripts: bool Js.t (optional)

  Only legitimate when using the html configuration.

  Defaults to: false
• callback: _ Js.callback (optional)

  Only legitimate when using the html configuration. Callback to execute when scripts have finished loading.

method updateLayout : 'r4. 'r4 Js.t Js.optdef -> unit Js.meth

Updates this component's layout. If this update affects this components ownerCt, that component's updateLayout method will be called to perform the layout instead. Otherwise, just this component (and its child items) will layout.

Parameters:

• options: _ Js.t (optional)

  An object with layout options.