Class type Ext_dom_Element.t

class type t = object .. end

Inherits

Ext_dom_AbstractElement.t

method autoBoxAdjust : bool Js.t Js.prop

True to automatically adjust width and height settings for box-model issues.

Defaults to: true

method originalDisplay : Js.js_string Js.t Js.prop

The element's default display mode.

Defined in override Ext.dom.Element_fx.

Defaults to: ""

method addClsOnClick : 'a 'b.
         Js.js_string Js.t ->
         'a Js.callback Js.optdef ->
         'b Js.t Js.optdef ->
         (< addCls : 'e. 'e Js.t -> 'd Js.t Js.meth; addClsOnClick : 'a 'b. 'c;
            addClsOnFocus : 'f 'g.
                              Js.js_string Js.t ->
                              'f Js.callback Js.optdef ->
                              'g Js.t Js.optdef -> 'd Js.t Js.meth;
            addClsOnOver : 'h 'i.
                             Js.js_string Js.t ->
                             'h Js.callback Js.optdef ->
                             'i Js.t Js.optdef -> 'd Js.t Js.meth;
            addKeyListener : 'j 'k 'l.
                               'j Js.t ->
                               'k Js.callback ->
                               'l Js.t Js.optdef -> Ext_util_KeyMap.t Js.t Js.meth;
            addKeyMap : 'm. 'm Js.t -> Ext_util_KeyMap.t Js.t Js.meth;
            addListener : 'n 'o 'p.
                            Js.js_string Js.t ->
                            'n Js.callback ->
                            'o Js.t Js.optdef ->
                            'p Js.t Js.optdef -> 'd Js.t Js.meth;
            animate : 'q. 'q Js.t -> 'd Js.t Js.meth;
            appendChild : 'r. 'r Js.t -> bool Js.t Js.optdef -> 'd Js.t Js.meth;
            appendTo : 's. 's Js.t -> 'd Js.t Js.meth;
            applyStyles : 't. 't Js.t -> 'd Js.t Js.meth;
            autoBoxAdjust : bool Js.t Js.prop; blur : 'd Js.t Js.meth;
            boxWrap : Js.js_string Js.t Js.optdef -> 'd Js.t Js.meth;
            cacheScrollValues : 'u. 'u Js.callback Js.meth;
            callParent : 'v 'w. 'v Js.t -> 'w Js.t Js.meth;
            callSuper : 'x 'y. 'x Js.t -> 'y Js.t Js.meth;
            center : 'z. 'z Js.t -> unit Js.meth;
            child : 'a1.
                      Js.js_string Js.t -> bool Js.t Js.optdef -> 'a1 Js.t Js.meth;
            clean : bool Js.t Js.optdef -> unit Js.meth;
            clearListeners : 'd Js.t Js.meth; clearOpacity : 'd Js.t Js.meth;
            clearPositioning : Js.js_string Js.t Js.optdef -> 'd Js.t Js.meth;
            clip : 'd Js.t Js.meth; contains : 'b1. 'b1 Js.t -> bool Js.t Js.meth;
            createChild : 'c1.
                            'c1 Js.t ->
                            Dom_html.element Js.t Js.optdef ->
                            bool Js.t Js.optdef -> 'd Js.t Js.meth;
            createProxy : 'd1 'e1.
                            'd1 Js.t ->
                            'e1 Js.t Js.optdef ->
                            bool Js.t Js.optdef -> 'd Js.t Js.meth;
            createShim : 'd Js.t Js.meth; defaultUnit : Js.js_string Js.t Js.prop;
            destroy : unit Js.meth; dom : Dom_html.element Js.t Js.prop;
            down : 'f1. Js.js_string Js.t -> bool Js.t Js.optdef -> 'f1 Js.t Js.meth;
            enableDisplayMode : Js.js_string Js.t Js.optdef -> 'd Js.t Js.meth;
            fadeIn : 'g1. 'g1 Js.t Js.optdef -> 'd Js.t Js.meth;
            fadeOut : 'h1. 'h1 Js.t Js.optdef -> 'd Js.t Js.meth;
            findParent : 'i1.
                           Js.js_string Js.t ->
                           'i1 Js.t Js.optdef ->
                           bool Js.t Js.optdef -> Dom_html.element Js.t Js.meth;
            findParentNode : 'j1.
                               Js.js_string Js.t ->
                               'j1 Js.t Js.optdef ->
                               bool Js.t Js.optdef -> Dom_html.element Js.t Js.meth;
            first : 'k1.
                      Js.js_string Js.t Js.optdef ->
                      bool Js.t Js.optdef -> 'k1 Js.t Js.meth;
            focus : Js.number Js.t Js.optdef -> 'd Js.t Js.meth;
            focusable : 'l1. 'l1 Js.t -> bool Js.t Js.meth;
            frame : 'm1.
                      Js.js_string Js.t Js.optdef ->
                      Js.number Js.t Js.optdef ->
                      'm1 Js.t Js.optdef -> 'd Js.t Js.meth;
            getActiveElement : Dom_html.element Js.t Js.meth;
            getAttribute : Js.js_string Js.t ->
                           Js.js_string Js.t Js.optdef -> Js.js_string Js.t Js.meth;
            getAttributeNS : Js.js_string Js.t ->
                             Js.js_string Js.t -> Js.js_string Js.t Js.meth;
            getBorderWidth : Js.js_string Js.t -> Js.number Js.t Js.meth;
            getById : Js.js_string Js.t -> bool Js.t Js.optdef -> unit Js.meth;
            getColor : Js.js_string Js.t ->
                       Js.js_string Js.t ->
                       Js.js_string Js.t Js.optdef -> unit Js.meth;
            getComputedHeight : Js.number Js.t Js.meth;
            getComputedWidth : Js.number Js.t Js.meth;
            getFrameWidth : Js.js_string Js.t -> Js.number Js.t Js.meth;
            getHTML : unit Js.meth;
            getHeight : bool Js.t Js.optdef -> Js.number Js.t Js.meth;
            getInitialConfig : 'n1. Js.js_string Js.t Js.optdef -> 'n1 Js.t Js.meth;
            getLoader : Ext_ElementLoader.t Js.t Js.meth;
            getLocalX : Js.number Js.t Js.meth;
            getLocalXY : 'o1. 'o1 Js.js_array Js.t Js.meth;
            getLocalY : Js.number Js.t Js.meth;
            getMargin : 'p1. Js.js_string Js.t Js.optdef -> 'p1 Js.t Js.meth;
            getPadding : Js.js_string Js.t -> Js.number Js.t Js.meth;
            getScroll : 'q1. 'q1 Js.t Js.meth;
            getScrollLeft : Js.number Js.t Js.meth;
            getScrollTop : Js.number Js.t Js.meth;
            getSize : 'r1. bool Js.t Js.optdef -> 'r1 Js.t Js.meth;
            getStyle : 's1 't1. 's1 Js.t -> bool Js.t Js.optdef -> 't1 Js.t Js.meth;
            getStyleSize : 'u1. 'u1 Js.t Js.meth;
            getTextWidth : Js.js_string Js.t ->
                           Js.number Js.t Js.optdef ->
                           Js.number Js.t Js.optdef -> Js.number Js.t Js.meth;
            getValue : 'v1. bool Js.t -> 'v1 Js.t Js.meth;
            getViewSize : 'w1. 'w1 Js.t Js.meth;
            getWidth : bool Js.t Js.optdef -> Js.number Js.t Js.meth;
            getX : Js.number Js.t Js.meth; getY : Js.number Js.t Js.meth;
            ghost : 'x1.
                      Js.js_string Js.t Js.optdef ->
                      'x1 Js.t Js.optdef -> 'd Js.t Js.meth;
            hasCls : Js.js_string Js.t -> bool Js.t Js.meth;
            hide : 'y1. 'y1 Js.t Js.optdef -> 'd Js.t Js.meth;
            highlight : 'z1.
                          Js.js_string Js.t Js.optdef ->
                          'z1 Js.t Js.optdef -> 'd Js.t Js.meth;
            hover : 'a2 'b2 'c2 'd2.
                      'a2 Js.callback ->
                      'b2 Js.callback ->
                      'c2 Js.t Js.optdef -> 'd2 Js.t Js.optdef -> 'd Js.t Js.meth;
            id : Js.js_string Js.t Js.prop;
            initConfig : 'e2. 'e2 Js.t -> 'd Js.t Js.meth;
            initDD : 'f2 'g2.
                       Js.js_string Js.t ->
                       'f2 Js.t -> 'g2 Js.t -> Ext_dd_DD.t Js.t Js.meth;
            initDDProxy : 'h2 'i2.
                            Js.js_string Js.t ->
                            'h2 Js.t -> 'i2 Js.t -> Ext_dd_DDProxy.t Js.t Js.meth;
            initDDTarget : 'j2 'k2.
                             Js.js_string Js.t ->
                             'j2 Js.t -> 'k2 Js.t -> Ext_dd_DDTarget.t Js.t Js.meth;
            insertAfter : 'l2. 'l2 Js.t -> 'd Js.t Js.meth;
            insertBefore : 'm2. 'm2 Js.t -> 'd Js.t Js.meth;
            insertFirst : 'n2. 'n2 Js.t -> 'd Js.t Js.meth;
            insertHtml : 'o2.
                           Js.js_string Js.t ->
                           Js.js_string Js.t ->
                           bool Js.t Js.optdef -> 'o2 Js.t Js.meth;
            insertSibling : 'p2.
                              'p2 Js.t ->
                              Js.js_string Js.t Js.optdef ->
                              bool Js.t Js.optdef -> 'd Js.t Js.meth;
            is : Js.js_string Js.t -> bool Js.t Js.meth;
            isBorderBox : bool Js.t Js.meth; isDisplayed : bool Js.t Js.meth;
            isFocusable : 'q2. 'q2 Js.t -> bool Js.t Js.meth;
            isMasked : bool Js.t Js.meth; isScrollable : bool Js.t Js.meth;
            isStyle : Js.js_string Js.t -> Js.js_string Js.t -> bool Js.t Js.meth;
            isTransparent : Js.js_string Js.t -> bool Js.t Js.meth;
            isVisible : bool Js.t Js.optdef -> bool Js.t Js.meth;
            last : 'r2.
                     Js.js_string Js.t Js.optdef ->
                     bool Js.t Js.optdef -> 'r2 Js.t Js.meth;
            load : 's2. 's2 Js.t -> 'd Js.t Js.meth;
            mask : Js.js_string Js.t Js.optdef ->
                   Js.js_string Js.t Js.optdef -> unit Js.meth;
            mask_element : Js.js_string Js.t Js.optdef ->
                           Js.js_string Js.t Js.optdef -> 'd Js.t Js.meth;
            monitorMouseLeave : 't2 'u2 'v2.
                                  Js.number Js.t ->
                                  't2 Js.callback ->
                                  'u2 Js.t Js.optdef -> 'v2 Js.t Js.meth;
            needsTabIndex : unit Js.meth;
            next : 'w2.
                     Js.js_string Js.t Js.optdef ->
                     bool Js.t Js.optdef -> 'w2 Js.t Js.meth;
            on : 'x2 'y2 'z2.
                   Js.js_string Js.t ->
                   'x2 Js.callback ->
                   'y2 Js.t Js.optdef -> 'z2 Js.t Js.optdef -> 'd Js.t Js.meth;
            originalDisplay : Js.js_string Js.t Js.prop;
            parent : 'a3.
                       Js.js_string Js.t Js.optdef ->
                       bool Js.t Js.optdef -> 'a3 Js.t Js.meth;
            position : Js.js_string Js.t Js.optdef ->
                       Js.number Js.t Js.optdef ->
                       Js.number Js.t Js.optdef ->
                       Js.number Js.t Js.optdef -> unit Js.meth;
            prev : 'b3.
                     Js.js_string Js.t Js.optdef ->
                     bool Js.t Js.optdef -> 'b3 Js.t Js.meth;
            puff : 'c3. 'c3 Js.t Js.optdef -> 'd Js.t Js.meth;
            purgeAllListeners : 'd Js.t Js.meth;
            query : Js.js_string Js.t ->
                    Dom_html.element Js.t Js.js_array Js.t Js.meth;
            radioCls : 'd3. 'd3 Js.t -> 'd Js.t Js.meth;
            relayEvent : 'e3. Js.js_string Js.t -> 'e3 Js.t -> unit Js.meth;
            remove : unit Js.meth; removeAllListeners : 'd Js.t Js.meth;
            removeCls : 'f3. 'f3 Js.t -> 'd Js.t Js.meth;
            removeListener : 'g3 'h3.
                               Js.js_string Js.t ->
                               'g3 Js.callback -> 'h3 Js.t -> 'd Js.t Js.meth;
            repaint : 'd Js.t Js.meth; replace : 'i3. 'i3 Js.t -> 'd Js.t Js.meth;
            replaceCls : Js.js_string Js.t -> Js.js_string Js.t -> 'd Js.t Js.meth;
            replaceWith : 'j3. 'j3 Js.t -> 'd Js.t Js.meth;
            scroll : 'k3.
                       Js.js_string Js.t ->
                       Js.number Js.t -> 'k3 Js.t Js.optdef -> bool Js.t Js.meth;
            scrollBy : 'l3 'm3 'n3.
                         'l3 Js.t -> 'm3 Js.t -> 'n3 Js.t -> 'd Js.t Js.meth;
            scrollIntoView : 'o3 'p3.
                               'o3 Js.t Js.optdef ->
                               bool Js.t Js.optdef ->
                               'p3 Js.t Js.optdef ->
                               bool Js.t Js.optdef -> 'd Js.t Js.meth;
            scrollTo : 'q3.
                         Js.js_string Js.t ->
                         Js.number Js.t -> 'q3 Js.t Js.optdef -> 'd Js.t Js.meth;
            select : 'r3.
                       Js.js_string Js.t -> bool Js.t Js.optdef -> 'r3 Js.t Js.meth;
            selectable : 'd Js.t Js.meth; self : Ext_Class.t Js.t Js.prop;
            serializeForm : 's3. 's3 Js.t -> Js.js_string Js.t Js.meth;
            set : 't3. 't3 Js.t -> bool Js.t Js.optdef -> 'd Js.t Js.meth;
            setDisplayed : 'u3. 'u3 Js.t -> 'd Js.t Js.meth;
            setHTML : Js.js_string Js.t -> 'd Js.t Js.meth;
            setHeight : 'v3. 'v3 Js.t -> 'd Js.t Js.meth;
            setOpacity : 'w3.
                           Js.number Js.t -> 'w3 Js.t Js.optdef -> 'd Js.t Js.meth;
            setPositioning : 'x3. 'x3 Js.t -> 'd Js.t Js.meth;
            setScrollLeft : Js.number Js.t -> 'd Js.t Js.meth;
            setScrollTop : Js.number Js.t -> 'd Js.t Js.meth;
            setSize : 'y3 'z3. 'y3 Js.t -> 'z3 Js.t -> 'd Js.t Js.meth;
            setStyle : 'a4.
                         'a4 Js.t -> Js.js_string Js.t Js.optdef -> 'd Js.t Js.meth;
            setVisibilityMode : 'b4. 'b4 Js.t -> 'd Js.t Js.meth;
            setVisible : 'c4. bool Js.t -> 'c4 Js.t Js.optdef -> 'd Js.t Js.meth;
            setWidth : 'd4. 'd4 Js.t -> 'd Js.t Js.meth;
            show : 'e4. 'e4 Js.t Js.optdef -> 'd Js.t Js.meth;
            slideIn : 'f4.
                        Js.js_string Js.t Js.optdef ->
                        'f4 Js.t Js.optdef -> 'd Js.t Js.meth;
            slideOut : 'g4.
                         Js.js_string Js.t Js.optdef ->
                         'g4 Js.t Js.optdef -> 'd Js.t Js.meth;
            statics : Ext_Class.t Js.t Js.meth;
            swallowEvent : 'h4. 'h4 Js.t -> bool Js.t Js.optdef -> 'd Js.t Js.meth;
            switchOff : 'i4. 'i4 Js.t Js.optdef -> 'd Js.t Js.meth;
            toggle : 'j4. 'j4 Js.t Js.optdef -> 'd Js.t Js.meth;
            toggleCls : Js.js_string Js.t -> 'd Js.t Js.meth;
            un : 'k4 'l4.
                   Js.js_string Js.t ->
                   'k4 Js.callback -> 'l4 Js.t -> 'd Js.t Js.meth;
            unclip : 'd Js.t Js.meth; unmask : unit Js.meth;
            unselectable : 'd Js.t Js.meth;
            up : 'm4.
                   Js.js_string Js.t ->
                   'm4 Js.t Js.optdef -> bool Js.t Js.optdef -> 'd Js.t Js.meth;
            update : Js.js_string Js.t -> 'd Js.t Js.meth;
            update_html : 'n4.
                            Js.js_string Js.t ->
                            bool Js.t Js.optdef ->
                            'n4 Js.callback Js.optdef -> 'd Js.t Js.meth;
            wrap : 'o4 'p4.
                     'o4 Js.t Js.optdef ->
                     bool Js.t Js.optdef ->
                     Js.js_string Js.t Js.optdef -> 'p4 Js.t Js.meth;
            .. >
          as 'd)
         Js.t Js.meth as 'c

Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)

Defined in override Ext.dom.Element_style.

Parameters:

className: Js.js_string Js.t
The class to add
testFn: _ Js.callback (optional)
A test function to execute before adding the class. The passed parameter will be the Element instance. If this functions returns false, the class will not be added.
scope: _ Js.t (optional)
The scope to execute the testFn in.

Returns:

Ext_dom_Element.t Js.t
this

method addClsOnFocus : 'f 'g.
         Js.js_string Js.t ->
         'f Js.callback Js.optdef -> 'g Js.t Js.optdef -> 'd Js.t Js.meth

Sets up event handlers to add and remove a css class when this element has the focus

Defined in override Ext.dom.Element_style.

Parameters:

className: Js.js_string Js.t
The class to add
testFn: _ Js.callback (optional)
A test function to execute before adding the class. The passed parameter will be the Element instance. If this functions returns false, the class will not be added.
scope: _ Js.t (optional)
The scope to execute the testFn in.

Returns:

Ext_dom_Element.t Js.t
this

method addClsOnOver : 'h 'i.
         Js.js_string Js.t ->
         'h Js.callback Js.optdef -> 'i Js.t Js.optdef -> 'd Js.t Js.meth

Sets up event handlers to add and remove a css class when the mouse is over this element

Defined in override Ext.dom.Element_style.

Parameters:

className: Js.js_string Js.t
The class to add
testFn: _ Js.callback (optional)
A test function to execute before adding the class. The passed parameter will be the Element instance. If this functions returns false, the class will not be added.
scope: _ Js.t (optional)
The scope to execute the testFn in.

Returns:

Ext_dom_Element.t Js.t
this

method addKeyListener : 'j 'k 'l.
         'j Js.t ->
         'k Js.callback -> 'l Js.t Js.optdef -> Ext_util_KeyMap.t Js.t Js.meth

Convenience method for constructing a KeyMap

Parameters:

key: _ Js.t
Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:
fn: _ Js.callback
The function to call
scope: _ Js.t (optional)
The scope (this reference) in which the specified function is executed. Defaults to this Element.

Returns:

Ext_util_KeyMap.t Js.t
The KeyMap created

method addKeyMap : 'm. 'm Js.t -> Ext_util_KeyMap.t Js.t Js.meth

Creates a KeyMap for this element

Parameters:

config: _ Js.t
The KeyMap config. See Ext.util.KeyMap for more details

Returns:

Ext_util_KeyMap.t Js.t
The KeyMap created

method addListener : 'n 'o 'p.
         Js.js_string Js.t ->
         'n Js.callback -> 'o Js.t Js.optdef -> 'p Js.t Js.optdef -> 'd Js.t Js.meth

Shorthand for on.

Appends an event handler to this element.

Parameters:

eventName: Js.js_string Js.t
The name of event to handle.
fn: _ Js.callback
The handler function the event invokes. This function is passed the following parameters:
- evt : EventObject
  
  The EventObject describing the event.
- el : HtmlElement
  
  The DOM element which was the target of the event. Note that this may be filtered by using the delegate option.
- o : Object
  
  The options object from the call that setup the listener.
scope: _ Js.t (optional)
The scope (this reference) in which the handler function is executed. If omitted, defaults to this Element.
options: _ Js.t (optional)
An object containing handler configuration properties. This may contain any of the following properties:
- scope Object :
  
  The scope (this reference) in which the handler function is executed. If omitted, defaults to this Element.
- delegate String:
  
  A simple selector to filter the target or look for a descendant of the target. See below for additional details.
- stopEvent Boolean:
  
  True to stop the event. That is stop propagation, and prevent the default action.
- preventDefault Boolean:
  
  True to prevent the default action
- stopPropagation Boolean:
  
  True to prevent event propagation
- normalized Boolean:
  
  False to pass a browser event to the handler function instead of an Ext.EventObject
- target Ext.dom.Element:
  
  Only call the handler if the event was fired on the target Element, not if the event was bubbled up from a child node.
- delay Number:
  
  The number of milliseconds to delay the invocation of the handler after the event fires.
- single Boolean:
  
  True to add a handler to handle just the next firing of the event, and then remove itself.
- buffer Number:
  
  Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.
Combining Options

Using the options argument, it is possible to combine different types of listeners:

A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the options object. The options object is available as the third parameter in the handler function.

Code:
```
el.on('click', this.onClick, this, {
    single: true,
    delay: 100,
    stopEvent : true,
    forumId: 4
});
```
Attaching multiple handlers in 1 call

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

Code:
```
el.on({
    'click' : {
        fn: this.onClick,
        scope: this,
        delay: 100
    },
    'mouseover' : {
        fn: this.onMouseOver,
        scope: this
    },
    'mouseout' : {
        fn: this.onMouseOut,
        scope: this
    }
});
```
Or a shorthand syntax:

Code:
```
el.on({
    'click' : this.onClick,
    'mouseover' : this.onMouseOver,
    'mouseout' : this.onMouseOut,
    scope: this
});
```
delegate

This is a configuration option that you can pass along when registering a handler for an event to assist with event delegation. Event delegation is a technique that is used to reduce memory consumption and prevent exposure to memory-leaks. By registering an event for a container element as opposed to each element within a container. By setting this configuration option to a simple selector, the target element will be filtered to look for a descendant of the target. For example:
```
// using this markup:
<div id='elId'>
    <p id='p1'>paragraph one</p>
    <p id='p2' class='clickable'>paragraph two</p>
    <p id='p3'>paragraph three</p>
</div>

// utilize event delegation to registering just one handler on the container element:
el = Ext.get('elId');
el.on(
    'click',
    function(e,t) {
        // handle click
        console.info(t.id); // 'p2'
    },
    this,
    {
        // filter the target element to be a descendant with the class 'clickable'
        delegate: '.clickable'
    }
);
```

Returns:

Ext_dom_Element.t Js.t
this

method animate : 'q. 'q Js.t -> 'd Js.t Js.meth

Performs custom animation on this Element.

The following properties may be specified in from, to, and keyframe objects:

x - The page X position in pixels.
y - The page Y position in pixels
left - The element's CSS left value. Units must be supplied.
top - The element's CSS top value. Units must be supplied.
width - The element's CSS width value. Units must be supplied.
height - The element's CSS height value. Units must be supplied.
scrollLeft - The element's scrollLeft value.
scrollTop - The element's scrollTop value.
opacity - The element's opacity value. This must be a value between 0 and 1.

Be aware that animating an Element which is being used by an Ext Component without in some way informing the Component about the changed element state will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to directly animate certain properties of Components.

Defined in override Ext.dom.Element_anim.

Parameters:

config: _ Js.t
Configuration for Ext.fx.Anim. Note that the to config is required.

Returns:

Ext_dom_Element.t Js.t
this

method blur : 'd Js.t Js.meth

Tries to blur the element. Any exceptions are caught and ignored.

Returns:

Ext_dom_Element.t Js.t
this

method boxWrap : Js.js_string Js.t Js.optdef -> 'd Js.t Js.meth

Wraps the specified element with a special 9 element markup/CSS block that renders by default as a gray container with a gradient background, rounded corners and a 4-way shadow.

This special markup is used throughout Ext when box wrapping elements (Ext.button.Button, Ext.panel.Panel when frame=true, Ext.window.Window). The markup is of this form:

Ext.dom.Element.boxMarkup =
'<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
<div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
<div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';

Example usage:

// Basic box wrap
Ext.get("foo").boxWrap();

// You can also add a custom class and use CSS inheritance rules to customize the box look.
// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
// for how to create a custom box wrap style.
Ext.get("foo").boxWrap().addCls("x-box-blue");

Defined in override Ext.dom.Element_style.

Parameters:

class: Js.js_string Js.t (optional)
A base CSS class to apply to the containing wrapper element. Note that there are a number of CSS rules that are dependent on this name to make the overall effect work, so if you supply an alternate base class, make sure you also supply all of the necessary rules.
Defaults to: 'x-box'

Returns:

Ext_dom_Element.t Js.t
The outermost wrapping element of the created box structure.

method cacheScrollValues : 'u. 'u Js.callback Js.meth

When an element is moved around in the DOM, or is hidden using display:none, it loses layout, and therefore all scroll positions of all descendant elements are lost.

This function caches them, and returns a function, which when run will restore the cached positions. In the following example, the Panel is moved from one Container to another which will cause it to lose all scroll positions:

var restoreScroll = myPanel.el.cacheScrollValues();
myOtherContainer.add(myPanel);
restoreScroll();

Returns:

_ Js.callback
A function which will restore all descentant elements of this Element to their scroll positions recorded when this function was executed. Be aware that the returned function is a closure which has captured the scope of cacheScrollValues, so take care to derefence it as soon as not needed - if is it is a var it will drop out of scope, and the reference will be freed.

method center : 'z. 'z Js.t -> unit Js.meth

Centers the Element in either the viewport, or another Element.

Defined in override Ext.dom.Element_position.

Parameters:

centerIn: _ Js.t
element in which to center the element.

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

Removes Empty, or whitespace filled text nodes. Combines adjacent text nodes.

Parameters:

forceReclean: bool Js.t (optional)
By default the element keeps track if it has been cleaned already so you can call this over and over. However, if you update the element and need to force a reclean, you can pass true.
Defaults to: false

method clearListeners : 'd Js.t Js.meth

Alias for removeAllListeners.

Removes all previous added listeners from this element

Returns:

Ext_dom_Element.t Js.t
this

method clearOpacity : 'd Js.t Js.meth

Clears any opacity settings from this element. Required in some cases for IE.

Defined in override Ext.dom.Element_style.

Returns:

Ext_dom_Element.t Js.t
this

method clearPositioning : Js.js_string Js.t Js.optdef -> 'd Js.t Js.meth

Clears positioning back to the default when the document was loaded.

Defined in override Ext.dom.Element_position.

Parameters:

value: Js.js_string Js.t (optional)
The value to use for the left, right, top, bottom. You could use 'auto'.
Defaults to: ''

Returns:

Ext_dom_Element.t Js.t
this

method clip : 'd Js.t Js.meth

Store the current overflow setting and clip overflow on the element - use unclip to remove

Defined in override Ext.dom.Element_style.

Returns:

Ext_dom_Element.t Js.t
this

method createProxy : 'd1 'e1.
         'd1 Js.t -> 'e1 Js.t Js.optdef -> bool Js.t Js.optdef -> 'd Js.t Js.meth

Creates a proxy element of this element

Parameters:

config: _ Js.t
The class name of the proxy element or a DomHelper config object
renderTo: _ Js.t (optional)
The element or element id to render the proxy to. Defaults to: document.body.
matchBox: bool Js.t (optional)
True to align and size the proxy to this element now.
Defaults to: false

Returns:

Ext_dom_Element.t Js.t
The new proxy element

method createShim : 'd Js.t Js.meth

Creates an iframe shim for this element to keep selects and other windowed objects from showing through.

Returns:

Ext_dom_Element.t Js.t
The new shim element

method enableDisplayMode : Js.js_string Js.t Js.optdef -> 'd Js.t Js.meth

Convenience method for setVisibilityMode(Element.DISPLAY)

Parameters:

display: Js.js_string Js.t (optional)
What to set display to when visible

Returns:

Ext_dom_Element.t Js.t
this

method fadeIn : 'g1. 'g1 Js.t Js.optdef -> 'd Js.t Js.meth

Fade an element in (from transparent to opaque). The ending opacity can be specified using the opacity config option. Usage:

// default: fade in from opacity 0 to 100%
el.fadeIn();

// custom: fade in from opacity 0 to 75% over 2 seconds
el.fadeIn({ opacity: .75, duration: 2000});

// common config options shown with default values
el.fadeIn({
    opacity: 1, //can be any value between 0 and 1 (e.g. .5)
    easing: 'easeOut',
    duration: 500
});

Defined in override Ext.dom.Element_anim.

Parameters:

options: _ Js.t (optional)
Object literal with any of the Ext.fx.Anim config options

Returns:

Ext_dom_Element.t Js.t
The Element

method fadeOut : 'h1. 'h1 Js.t Js.optdef -> 'd Js.t Js.meth

Fade an element out (from opaque to transparent). The ending opacity can be specified using the opacity config option. Note that IE may require useDisplay:true in order to redisplay correctly. Usage:

// default: fade out from the element's current opacity to 0
el.fadeOut();

// custom: fade out from the element's current opacity to 25% over 2 seconds
el.fadeOut({ opacity: .25, duration: 2000});

// common config options shown with default values
el.fadeOut({
    opacity: 0, //can be any value between 0 and 1 (e.g. .5)
    easing: 'easeOut',
    duration: 500,
    remove: false,
    useDisplay: false
});

Defined in override Ext.dom.Element_anim.

Parameters:

options: _ Js.t (optional)
Object literal with any of the Ext.fx.Anim config options

Returns:

Ext_dom_Element.t Js.t
The Element

method focus : Js.number Js.t Js.optdef -> 'd Js.t Js.meth

Tries to focus the element. Any exceptions are caught and ignored.

Parameters:

defer: Js.number Js.t (optional)
Milliseconds to defer the focus

Returns:

Ext_dom_Element.t Js.t
this

method focusable : 'l1. 'l1 Js.t -> bool Js.t Js.meth

Alias for isFocusable.

Checks whether this element can be focused.

Parameters:

asFocusEl: _ Js.t

Returns:

bool Js.t
True if the element is focusable

method frame : 'm1.
         Js.js_string Js.t Js.optdef ->
         Js.number Js.t Js.optdef -> 'm1 Js.t Js.optdef -> 'd Js.t Js.meth

Shows a ripple of exploding, attenuating borders to draw attention to an Element. Usage:

// default: a single light blue ripple
el.frame();

// custom: 3 red ripples lasting 3 seconds total
el.frame("#ff0000", 3, { duration: 3000 });

// common config options shown with default values
el.frame("#C3DAF9", 1, {
    duration: 1000 // duration of each individual ripple.
    // Note: Easing is not configurable and will be ignored if included
});

Defined in override Ext.dom.Element_anim.

Parameters:

color: Js.js_string Js.t (optional)
The hex color value for the border.
Defaults to: '#C3DAF9'
count: Js.number Js.t (optional)
The number of ripples to display.
Defaults to: 1
options: _ Js.t (optional)
Object literal with any of the Ext.fx.Anim config options

Returns:

Ext_dom_Element.t Js.t
The Element

method getAttributeNS : Js.js_string Js.t -> Js.js_string Js.t -> Js.js_string Js.t Js.meth

Returns the value of a namespaced attribute from the element's underlying DOM node.

Parameters:

namespace: Js.js_string Js.t
The namespace in which to look for the attribute
name: Js.js_string Js.t
The attribute name

Returns:

Js.js_string Js.t
The attribute value

method getColor : Js.js_string Js.t ->
       Js.js_string Js.t -> Js.js_string Js.t Js.optdef -> unit Js.meth

Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values are convert to standard 6 digit hex color.

Defined in override Ext.dom.Element_style.

Parameters:

attr: Js.js_string Js.t
The css attribute
defaultValue: Js.js_string Js.t
The default value to use when a valid color isn't found
prefix: Js.js_string Js.t (optional)
defaults to #. Use an empty string when working with color anims.

method getComputedHeight : Js.number Js.t Js.meth

Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements if a height has not been set using CSS.

Defined in override Ext.dom.Element_style.

method getComputedWidth : Js.number Js.t Js.meth

Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements if a width has not been set using CSS.

Defined in override Ext.dom.Element_style.

method getFrameWidth : Js.js_string Js.t -> Js.number Js.t Js.meth

Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth() for more information about the sides.

Defined in override Ext.dom.Element_style.

Parameters:

sides: Js.js_string Js.t

method getLoader : Ext_ElementLoader.t Js.t Js.meth

Gets this element's ElementLoader

Returns:

Ext_ElementLoader.t Js.t
The loader

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

Gets the local CSS X position for the element

Defined in override Ext.dom.Element_position.

method getLocalXY : 'o1. 'o1 Js.js_array Js.t Js.meth

Gets the local CSS X and Y position for the element

Defined in override Ext.dom.Element_position.

Returns:

_ Js.js_array Js.t
[x, y]

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

Gets the local CSS Y position for the element

Defined in override Ext.dom.Element_position.

method getScroll : 'q1. 'q1 Js.t Js.meth

Returns the current scroll position of the element.

Defined in override Ext.dom.Element_scroll.

Returns:

_ Js.t
An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}

method getScrollLeft : Js.number Js.t Js.meth

Gets the left scroll position

Defined in override Ext.dom.Element_scroll.

Returns:

Js.number Js.t
The left scroll position

method getScrollTop : Js.number Js.t Js.meth

Gets the top scroll position

Defined in override Ext.dom.Element_scroll.

Returns:

Js.number Js.t
The top scroll position

method getStyleSize : 'u1. 'u1 Js.t Js.meth

Returns the dimensions of the element available to lay content out in.

getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth. To obtain the size excluding scrollbars, use getViewSize.

Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.

Defined in override Ext.dom.Element_style.

Returns:

_ Js.t
Object describing width and height.

method getTextWidth : Js.js_string Js.t ->
       Js.number Js.t Js.optdef ->
       Js.number Js.t Js.optdef -> Js.number Js.t Js.meth

Returns the width in pixels of the passed text, or the width of the text in this Element.

Parameters:

text: Js.js_string Js.t
The text to measure. Defaults to the innerHTML of the element.
min: Js.number Js.t (optional)
The minumum value to return.
max: Js.number Js.t (optional)
The maximum value to return.

Returns:

Js.number Js.t
The text width in pixels.

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

Gets element X position in page coordinates

Defined in override Ext.dom.Element_position.

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

Gets element Y position in page coordinates

Defined in override Ext.dom.Element_position.

method ghost : 'x1. Js.js_string Js.t Js.optdef -> 'x1 Js.t Js.optdef -> 'd Js.t Js.meth

Slides the element while fading it out of view. An anchor point can be optionally passed to set the ending point of the effect. Usage:

// default: slide the element downward while fading out
el.ghost();

// custom: slide the element out to the right with a 2-second duration
el.ghost('r', { duration: 2000 });

// common config options shown with default values
el.ghost('b', {
    easing: 'easeOut',
    duration: 500
});

Defined in override Ext.dom.Element_anim.

Parameters:

anchor: Js.js_string Js.t (optional)
One of the valid Ext.fx.Anim anchor positions (defaults to bottom: 'b')
options: _ Js.t (optional)
Object literal with any of the Ext.fx.Anim config options

Returns:

Ext_dom_Element.t Js.t
The Element

method hide : 'y1. 'y1 Js.t Js.optdef -> 'd Js.t Js.meth

Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.

Defined in override Ext.dom.Element_fx.

Parameters:

animate: _ Js.t (optional)
true for the default animation or a standard Element animation config object

Returns:

Ext_dom_Element.t Js.t
this

method highlight : 'z1. Js.js_string Js.t Js.optdef -> 'z1 Js.t Js.optdef -> 'd Js.t Js.meth

Highlights the Element by setting a color (applies to the background-color by default, but can be changed using the "attr" config option) and then fading back to the original color. If no original color is available, you should provide the "endColor" config option which will be cleared after the animation. Usage:

// default: highlight background to yellow
el.highlight();

// custom: highlight foreground text to blue for 2 seconds
el.highlight("0000ff", { attr: 'color', duration: 2000 });

// common config options shown with default values
el.highlight("ffff9c", {
    attr: "backgroundColor", //can be any valid CSS property (attribute) that supports a color value
    endColor: (current color) or "ffffff",
    easing: 'easeIn',
    duration: 1000
});

Defined in override Ext.dom.Element_anim.

Parameters:

color: Js.js_string Js.t (optional)
The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
options: _ Js.t (optional)
Object literal with any of the Ext.fx.Anim config options

Returns:

Ext_dom_Element.t Js.t
The Element

method hover : 'a2 'b2 'c2 'd2.
         'a2 Js.callback ->
         'b2 Js.callback ->
         'c2 Js.t Js.optdef -> 'd2 Js.t Js.optdef -> 'd Js.t Js.meth

Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.

Parameters:

overFn: _ Js.callback
The function to call when the mouse enters the Element.
outFn: _ Js.callback
The function to call when the mouse leaves the Element.
scope: _ Js.t (optional)
The scope (this reference) in which the functions are executed. Defaults to the Element's DOM element.
options: _ Js.t (optional)
Options for the listener. See the options parameter.

Returns:

Ext_dom_Element.t Js.t
this

method initDD : 'f2 'g2.
         Js.js_string Js.t -> 'f2 Js.t -> 'g2 Js.t -> Ext_dd_DD.t Js.t Js.meth

Initializes a Ext.dd.DD drag drop object for this element.

Defined in override Ext.dom.Element_dd.

Parameters:

group: Js.js_string Js.t
The group the DD object is member of
config: _ Js.t
The DD config object
overrides: _ Js.t
An object containing methods to override/implement on the DD object

Returns:

Ext_dd_DD.t Js.t
The DD object

method initDDProxy : 'h2 'i2.
         Js.js_string Js.t -> 'h2 Js.t -> 'i2 Js.t -> Ext_dd_DDProxy.t Js.t Js.meth

Initializes a Ext.dd.DDProxy object for this element.

Defined in override Ext.dom.Element_dd.

Parameters:

group: Js.js_string Js.t
The group the DDProxy object is member of
config: _ Js.t
The DDProxy config object
overrides: _ Js.t
An object containing methods to override/implement on the DDProxy object

Returns:

Ext_dd_DDProxy.t Js.t
The DDProxy object

method initDDTarget : 'j2 'k2.
         Js.js_string Js.t -> 'j2 Js.t -> 'k2 Js.t -> Ext_dd_DDTarget.t Js.t Js.meth

Initializes a Ext.dd.DDTarget object for this element.

Defined in override Ext.dom.Element_dd.

Parameters:

group: Js.js_string Js.t
The group the DDTarget object is member of
config: _ Js.t
The DDTarget config object
overrides: _ Js.t
An object containing methods to override/implement on the DDTarget object

Returns:

Ext_dd_DDTarget.t Js.t
The DDTarget object

method isBorderBox : bool Js.t Js.meth

Tests various css rules/browsers to determine if this element uses a border box

method isDisplayed : bool Js.t Js.meth

Returns true if display is not "none"

method isFocusable : 'q2. 'q2 Js.t -> bool Js.t Js.meth

Checks whether this element can be focused.

Parameters:

asFocusEl: _ Js.t

Returns:

bool Js.t
True if the element is focusable

method isMasked : bool Js.t Js.meth

Returns true if this element is masked. Also re-centers any displayed message within the mask.

method isScrollable : bool Js.t Js.meth

Returns true if this element is scrollable.

Defined in override Ext.dom.Element_scroll.

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

Checks whether the element is currently visible using both visibility and display properties.

Parameters:

deep: bool Js.t (optional)
True to walk the dom and see if parent elements are hidden. If false, the function only checks the visibility of the element itself and it may return true even though a parent is not visible.
Defaults to: false

Returns:

bool Js.t
true if the element is currently visible, else false

method load : 's2. 's2 Js.t -> 'd Js.t Js.meth

Direct access to the Ext.ElementLoader Ext.ElementLoader.load method. The method takes the same object parameter as Ext.ElementLoader.load

Parameters:

options: _ Js.t

Returns:

Ext_dom_Element.t Js.t
this

method mask_element : Js.js_string Js.t Js.optdef -> Js.js_string Js.t Js.optdef -> 'd Js.t Js.meth

Puts a mask over this element to disable user interaction. Requires core.css. This method can only be applied to elements which accept child nodes.

Parameters:

msg: Js.js_string Js.t (optional)
A message to display in the mask
msgCls: Js.js_string Js.t (optional)
A css class to apply to the msg element

Returns:

Ext_dom_Element.t Js.t
The mask element

method monitorMouseLeave : 't2 'u2 'v2.
         Js.number Js.t -> 't2 Js.callback -> 'u2 Js.t Js.optdef -> 'v2 Js.t Js.meth

Monitors this Element for the mouse leaving. Calls the function after the specified delay only if the mouse was not moved back into the Element within the delay. If the mouse was moved back in, the function is not called.

Parameters:

delay: Js.number Js.t
The delay in milliseconds to wait for possible mouse re-entry before calling the handler function.
handler: _ Js.callback
The function to call if the mouse remains outside of this Element for the specified time.
scope: _ Js.t (optional)
The scope (this reference) in which the handler function executes. Defaults to this Element.

Returns:

_ Js.t

The listeners object which was added to this element so that monitoring can be stopped. Example usage:

// Hide the menu if the mouse moves out for 250ms or more
this.mouseLeaveMonitor = this.menuEl.monitorMouseLeave(250, this.hideMenu, this);

...
// Remove mouseleave monitor on menu destroy
this.menuEl.un(this.mouseLeaveMonitor);

method needsTabIndex : unit Js.meth

Returns true if this element needs an explicit tabIndex to make it focusable. Input fields, text areas, buttons anchors elements with an href etc do not need a tabIndex, but structural elements do.

method on : 'x2 'y2 'z2.
         Js.js_string Js.t ->
         'x2 Js.callback ->
         'y2 Js.t Js.optdef -> 'z2 Js.t Js.optdef -> 'd Js.t Js.meth

Appends an event handler to this element.

Parameters:

eventName: Js.js_string Js.t
The name of event to handle.
fn: _ Js.callback
The handler function the event invokes. This function is passed the following parameters:
- evt : EventObject
  
  The EventObject describing the event.
- el : HtmlElement
  
  The DOM element which was the target of the event. Note that this may be filtered by using the delegate option.
- o : Object
  
  The options object from the call that setup the listener.
scope: _ Js.t (optional)
The scope (this reference) in which the handler function is executed. If omitted, defaults to this Element.
options: _ Js.t (optional)
An object containing handler configuration properties. This may contain any of the following properties:
- scope Object :
  
  The scope (this reference) in which the handler function is executed. If omitted, defaults to this Element.
- delegate String:
  
  A simple selector to filter the target or look for a descendant of the target. See below for additional details.
- stopEvent Boolean:
  
  True to stop the event. That is stop propagation, and prevent the default action.
- preventDefault Boolean:
  
  True to prevent the default action
- stopPropagation Boolean:
  
  True to prevent event propagation
- normalized Boolean:
  
  False to pass a browser event to the handler function instead of an Ext.EventObject
- target Ext.dom.Element:
  
  Only call the handler if the event was fired on the target Element, not if the event was bubbled up from a child node.
- delay Number:
  
  The number of milliseconds to delay the invocation of the handler after the event fires.
- single Boolean:
  
  True to add a handler to handle just the next firing of the event, and then remove itself.
- buffer Number:
  
  Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.
Combining Options

Using the options argument, it is possible to combine different types of listeners:

A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the options object. The options object is available as the third parameter in the handler function.

Code:
```
el.on('click', this.onClick, this, {
    single: true,
    delay: 100,
    stopEvent : true,
    forumId: 4
});
```
Attaching multiple handlers in 1 call

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

Code:
```
el.on({
    'click' : {
        fn: this.onClick,
        scope: this,
        delay: 100
    },
    'mouseover' : {
        fn: this.onMouseOver,
        scope: this
    },
    'mouseout' : {
        fn: this.onMouseOut,
        scope: this
    }
});
```
Or a shorthand syntax:

Code:
```
el.on({
    'click' : this.onClick,
    'mouseover' : this.onMouseOver,
    'mouseout' : this.onMouseOut,
    scope: this
});
```
delegate

This is a configuration option that you can pass along when registering a handler for an event to assist with event delegation. Event delegation is a technique that is used to reduce memory consumption and prevent exposure to memory-leaks. By registering an event for a container element as opposed to each element within a container. By setting this configuration option to a simple selector, the target element will be filtered to look for a descendant of the target. For example:
```
// using this markup:
<div id='elId'>
    <p id='p1'>paragraph one</p>
    <p id='p2' class='clickable'>paragraph two</p>
    <p id='p3'>paragraph three</p>
</div>

// utilize event delegation to registering just one handler on the container element:
el = Ext.get('elId');
el.on(
    'click',
    function(e,t) {
        // handle click
        console.info(t.id); // 'p2'
    },
    this,
    {
        // filter the target element to be a descendant with the class 'clickable'
        delegate: '.clickable'
    }
);
```

Returns:

Ext_dom_Element.t Js.t
this

method position : Js.js_string Js.t Js.optdef ->
       Js.number Js.t Js.optdef ->
       Js.number Js.t Js.optdef -> Js.number Js.t Js.optdef -> unit Js.meth

Initializes positioning on this element. If a desired position is not passed, it will make the the element positioned relative IF it is not already positioned.

Defined in override Ext.dom.Element_position.

Parameters:

pos: Js.js_string Js.t (optional)
Positioning to use "relative", "absolute" or "fixed"
zIndex: Js.number Js.t (optional)
The zIndex to apply
x: Js.number Js.t (optional)
Set the page X position
y: Js.number Js.t (optional)
Set the page Y position

method puff : 'c3. 'c3 Js.t Js.optdef -> 'd Js.t Js.meth

Fades the element out while slowly expanding it in all directions. When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. Usage:

// default
el.puff();

// common config options shown with default values
el.puff({
    easing: 'easeOut',
    duration: 500,
    useDisplay: false
});

Defined in override Ext.dom.Element_anim.

Parameters:

options: _ Js.t (optional)
Object literal with any of the Ext.fx.Anim config options

Returns:

Ext_dom_Element.t Js.t
The Element

method purgeAllListeners : 'd Js.t Js.meth

Recursively removes all previous added listeners from this element and its children

Returns:

Ext_dom_Element.t Js.t
this

method relayEvent : 'e3. Js.js_string Js.t -> 'e3 Js.t -> unit Js.meth

Create an event handler on this element such that when the event fires and is handled by this element, it will be relayed to another object (i.e., fired again as if it originated from that object instead).

Parameters:

eventName: Js.js_string Js.t
The type of event to relay
observable: _ Js.t
Any object that extends Ext.util.Observable that will provide the context for firing the relayed event

method removeAllListeners : 'd Js.t Js.meth

Removes all previous added listeners from this element

Returns:

Ext_dom_Element.t Js.t
this

method removeListener : 'g3 'h3. Js.js_string Js.t -> 'g3 Js.callback -> 'h3 Js.t -> 'd Js.t Js.meth

Shorthand for un.

Removes an event handler from this element.

Note: if a scope was explicitly specified when adding the listener, the same scope must be specified here.

Example:

el.un('click', this.handlerFn);
// or
el.removeListener('click', this.handlerFn);

Parameters:

eventName: Js.js_string Js.t
The name of the event from which to remove the handler.
fn: _ Js.callback
The handler function to remove. This must be a reference to the function passed into the on call.
scope: _ Js.t
If a scope (this reference) was specified when the listener was added, then this must refer to the same object.

Returns:

Ext_dom_Element.t Js.t
this

method scroll : 'k3.
         Js.js_string Js.t ->
         Js.number Js.t -> 'k3 Js.t Js.optdef -> bool Js.t Js.meth

Scrolls this element the specified direction. Does bounds checking to make sure the scroll is within this element's scrollable range.

Defined in override Ext.dom.Element_scroll.

Parameters:

direction: Js.js_string Js.t
Possible values are:
- "l" (or "left")
- "r" (or "right")
- "t" (or "top", or "up")
- "b" (or "bottom", or "down")
distance: Js.number Js.t
How far to scroll the element in pixels
animate: _ Js.t (optional)
true for the default animation or a standard Element animation config object

Returns:

bool Js.t
Returns true if a scroll was triggered or false if the element was scrolled as far as it could go.

method scrollBy : 'l3 'm3 'n3. 'l3 Js.t -> 'm3 Js.t -> 'n3 Js.t -> 'd Js.t Js.meth

Scrolls this element by the passed delta values, optionally animating.

All of the following are equivalent:

 el.scrollBy(10, 10, true);
 el.scrollBy([10, 10], true);
 el.scrollBy({ x: 10, y: 10 }, true);

Defined in override Ext.dom.Element_scroll.

Parameters:

deltaX: _ Js.t
Either the x delta, an Array specifying x and y deltas or an object with "x" and "y" properties.
deltaY: _ Js.t
Either the y delta, or an animate flag or config object.
animate: _ Js.t
Animate flag/config object if the delta values were passed separately.

Returns:

Ext_dom_Element.t Js.t
this

method scrollIntoView : 'o3 'p3.
         'o3 Js.t Js.optdef ->
         bool Js.t Js.optdef ->
         'p3 Js.t Js.optdef -> bool Js.t Js.optdef -> 'd Js.t Js.meth

Scrolls this element into view within the passed container.

Defined in override Ext.dom.Element_scroll.

Parameters:

container: _ Js.t (optional)
The container element to scroll. Should be a string (id), dom node, or Ext.Element.
Defaults to: document.body
hscroll: bool Js.t (optional)
False to disable horizontal scroll.
Defaults to: true
animate: _ Js.t (optional)
true for the default animation or a standard Element
highlight: bool Js.t (optional)
true to highlight the element when it is in view. animation config object
Defaults to: false

Returns:

Ext_dom_Element.t Js.t
this

method scrollTo : 'q3.
         Js.js_string Js.t ->
         Js.number Js.t -> 'q3 Js.t Js.optdef -> 'd Js.t Js.meth

Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll.

Defined in override Ext.dom.Element_scroll.

Parameters:

side: Js.js_string Js.t
Either "left" for scrollLeft values or "top" for scrollTop values.
value: Js.number Js.t
The new scroll value
animate: _ Js.t (optional)
true for the default animation or a standard Element animation config object

Returns:

Ext_dom_Element.t Js.t
this

method selectable : 'd Js.t Js.meth

Enable text selection for this element (normalized across browsers)

Defined in override Ext.dom.Element_style.

Returns:

Ext_dom_Element.t Js.t
this

method setDisplayed : 'u3. 'u3 Js.t -> 'd Js.t Js.meth

Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.

Defined in override Ext.dom.Element_fx.

Parameters:

value: _ Js.t
Boolean value to display the element using its default display, or a string to set the display directly.

Returns:

Ext_dom_Element.t Js.t
this

method setOpacity : 'w3. Js.number Js.t -> 'w3 Js.t Js.optdef -> 'd Js.t Js.meth

Set the opacity of the element

Defined in override Ext.dom.Element_style.

Parameters:

opacity: Js.number Js.t
The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
animate: _ Js.t (optional)
a standard Element animation config object or true for the default animation ({duration: 350, easing: 'easeIn'})

Returns:

Ext_dom_Element.t Js.t
this

method setPositioning : 'x3. 'x3 Js.t -> 'd Js.t Js.meth

Set positioning with an object returned by getPositioning.

Defined in override Ext.dom.Element_position.

Parameters:

posCfg: _ Js.t

Returns:

Ext_dom_Element.t Js.t
this

method setScrollLeft : Js.number Js.t -> 'd Js.t Js.meth

Sets the left scroll position

Defined in override Ext.dom.Element_scroll.

Parameters:

left: Js.number Js.t
The left scroll position

Returns:

Ext_dom_Element.t Js.t
this

method setScrollTop : Js.number Js.t -> 'd Js.t Js.meth

Sets the top scroll position

Defined in override Ext.dom.Element_scroll.

Parameters:

top: Js.number Js.t
The top scroll position

Returns:

Ext_dom_Element.t Js.t
this

method setVisible : 'c4. bool Js.t -> 'c4 Js.t Js.optdef -> 'd Js.t Js.meth

Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.

Defined in override Ext.dom.Element_fx.

Parameters:

visible: bool Js.t
Whether the element is visible
animate: _ Js.t (optional)
True for the default animation, or a standard Element animation config object

Returns:

Ext_dom_Element.t Js.t
this

method show : 'e4. 'e4 Js.t Js.optdef -> 'd Js.t Js.meth

Show this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.

Defined in override Ext.dom.Element_fx.

Parameters:

animate: _ Js.t (optional)
true for the default animation or a standard Element animation config object

Returns:

Ext_dom_Element.t Js.t
this

method slideIn : 'f4. Js.js_string Js.t Js.optdef -> 'f4 Js.t Js.optdef -> 'd Js.t Js.meth

Slides the element into view. An anchor point can be optionally passed to set the point of origin for the slide effect. This function automatically handles wrapping the element with a fixed-size container if needed. See the Ext.fx.Anim class overview for valid anchor point options. Usage:

// default: slide the element in from the top
el.slideIn();

// custom: slide the element in from the right with a 2-second duration
el.slideIn('r', { duration: 2000 });

// common config options shown with default values
el.slideIn('t', {
    easing: 'easeOut',
    duration: 500
});

Defined in override Ext.dom.Element_anim.

Parameters:

anchor: Js.js_string Js.t (optional)
One of the valid Ext.fx.Anim anchor positions (defaults to top: 't')
options: _ Js.t (optional)
Object literal with any of the Ext.fx.Anim config options

Returns:

Ext_dom_Element.t Js.t
The Element

method slideOut : 'g4. Js.js_string Js.t Js.optdef -> 'g4 Js.t Js.optdef -> 'd Js.t Js.meth

Slides the element out of view. An anchor point can be optionally passed to set the end point for the slide effect. When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired. This function automatically handles wrapping the element with a fixed-size container if needed. See the Ext.fx.Anim class overview for valid anchor point options. Usage:

// default: slide the element out to the top
el.slideOut();

// custom: slide the element out to the right with a 2-second duration
el.slideOut('r', { duration: 2000 });

// common config options shown with default values
el.slideOut('t', {
    easing: 'easeOut',
    duration: 500,
    remove: false,
    useDisplay: false
});

Defined in override Ext.dom.Element_anim.

Parameters:

anchor: Js.js_string Js.t (optional)
One of the valid Ext.fx.Anim anchor positions (defaults to top: 't')
options: _ Js.t (optional)
Object literal with any of the Ext.fx.Anim config options

Returns:

Ext_dom_Element.t Js.t
The Element

method swallowEvent : 'h4. 'h4 Js.t -> bool Js.t Js.optdef -> 'd Js.t Js.meth

Stops the specified event(s) from bubbling and optionally prevents the default action

Parameters:

eventName: _ Js.t
an event / array of events to stop from bubbling
preventDefault: bool Js.t (optional)
true to prevent the default action too

Returns:

Ext_dom_Element.t Js.t
this

method switchOff : 'i4. 'i4 Js.t Js.optdef -> 'd Js.t Js.meth

Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television). When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired. Usage:

// default
el.switchOff();

// all config options shown with default values
el.switchOff({
    easing: 'easeIn',
    duration: .3,
    remove: false,
    useDisplay: false
});

Defined in override Ext.dom.Element_anim.

Parameters:

options: _ Js.t (optional)
Object literal with any of the Ext.fx.Anim config options

Returns:

Ext_dom_Element.t Js.t
The Element

method toggle : 'j4. 'j4 Js.t Js.optdef -> 'd Js.t Js.meth

Toggles the element's visibility or display, depending on visibility mode.

Defined in override Ext.dom.Element_fx.

Parameters:

animate: _ Js.t (optional)
True for the default animation, or a standard Element animation config object

Returns:

Ext_dom_Element.t Js.t
this

method un : 'k4 'l4. Js.js_string Js.t -> 'k4 Js.callback -> 'l4 Js.t -> 'd Js.t Js.meth

Removes an event handler from this element.

Note: if a scope was explicitly specified when adding the listener, the same scope must be specified here.

Example:

el.un('click', this.handlerFn);
// or
el.removeListener('click', this.handlerFn);

Parameters:

eventName: Js.js_string Js.t
The name of the event from which to remove the handler.
fn: _ Js.callback
The handler function to remove. This must be a reference to the function passed into the on call.
scope: _ Js.t
If a scope (this reference) was specified when the listener was added, then this must refer to the same object.

Returns:

Ext_dom_Element.t Js.t
this

method unclip : 'd Js.t Js.meth

Return clipping (overflow) to original clipping before clip was called

Defined in override Ext.dom.Element_style.

Returns:

Ext_dom_Element.t Js.t
this

method unmask : unit Js.meth

Hides a previously applied mask.

method unselectable : 'd Js.t Js.meth

Disables text selection for this element (normalized across browsers)

Defined in override Ext.dom.Element_style.

Returns:

Ext_dom_Element.t Js.t
this

method update_html : 'n4.
         Js.js_string Js.t ->
         bool Js.t Js.optdef -> 'n4 Js.callback Js.optdef -> 'd Js.t Js.meth

Updates the innerHTML of this element, optionally searching for and processing scripts.

Parameters:

html: Js.js_string Js.t
The new HTML
loadScripts: bool Js.t (optional)
True to look for and process scripts (defaults to false)
callback: _ Js.callback (optional)
For async script loading you can be notified when the update completes

Returns:

Ext_dom_Element.t Js.t
this