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

Sencha Documentation

+ + + + + +

Mixins

An abstract base class which provides shared methods for Components across the Sencha product line.

+ + +

Please refer to sub class's documentation

+ +
Defined By

Config Options

CSS Class configs

 
The base CSS class to apply to this components's element. This will also be prepended to +elements within this compone...

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

+
 
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be +useful for ...

An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be +useful for adding customized styles to the component or any of its children using standard CSS rules.

+
 

CSS Class to be added to a components root level element to give distinction to it +via styling.

+

CSS Class to be added to a components root level element to give distinction to it +via styling.

+
 

CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.

+

CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.

+
 
An optional extra CSS class that will be added to this component's Element when the mouse moves +over the Element, and...

An optional extra CSS class that will be added to this component's Element when the mouse moves +over the Element, and removed when the mouse moves out. (defaults to ''). This can be +useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.

+
 

The class that is added to the content target when you set styleHtmlContent to true. +Defaults to 'x-html'

+

The class that is added to the content target when you set styleHtmlContent to true. +Defaults to 'x-html'

+

Other Configs

 
A tag name or DomHelper spec used to create the Element which will +encapsulate this Component. + + +You do not normally ...

A tag name or DomHelper spec used to create the Element which will +encapsulate this Component.

+ + +

You do not normally need to specify this. For the base classes Ext.Component and Ext.container.Container, +this defaults to 'div'. The more complex Sencha classes use a more complex +DOM structure specified by their own renderTpls.

+ + +

This is intended to allow the developer to create application-specific utility Components encapsulated by +different DOM elements. Example usage:

+ + +
{
+    xtype: 'component',
+    autoEl: {
+        tag: 'img',
+        src: 'http://www.example.com/example.jpg'
+    }
+}, {
+    xtype: 'component',
+    autoEl: {
+        tag: 'blockquote',
+        html: 'autoEl is cool!'
+    }
+}, {
+    xtype: 'container',
+    autoEl: 'ul',
+    cls: 'ux-unordered-list',
+    items: {
+        xtype: 'component',
+        autoEl: 'li',
+        html: 'First list item'
+    }
+}
+
+ +
 
This config is intended mainly for floating Components which may or may not be shown. Instead +of using renderTo in th...

This config is intended mainly for floating Components which may or may not be shown. Instead +of using renderTo in the configuration, and rendering upon construction, this allows a Component +to render itself upon first show.

+ + +

Specify as true to have this Component render to the document body upon first show.

+ + +

Specify as an element, or the ID of an element to have this Component render to a specific element upon first show.

+ + +

This defaults to true for the Window class.

+ +
 
True to automatically show the component upon creation. +This config option may only be used for floating components o...

True to automatically show the component upon creation. +This config option may only be used for floating components or components +that use autoRender. Defaults to false.

+
 
The base CSS class to apply to this components's element. This will also be prepended to +elements within this compone...

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

+
 
Specifies the border for this component. The border can be a single numeric value to apply to all sides or +it can be ...

Specifies the border for this component. The border can be a single numeric value to apply to all sides or +it can be a CSS style specification for each style, for example: '10 5 3 10'.

+
 
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be +useful for ...

An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be +useful for adding customized styles to the component or any of its children using standard CSS rules.

+
 

CSS Class to be added to a components root level element to give distinction to it +via styling.

+

CSS Class to be added to a components root level element to give distinction to it +via styling.

+
 
The sizing and positioning of a Component's internal Elements is the responsibility of +the Component's layout manager...

The sizing and positioning of a Component's internal Elements is the responsibility of +the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.

+ + +

Generally, developers will not use this configuration as all provided Components which need their internal +elements sizing (Such as input fields) come with their own componentLayout managers.

+ + +

The default layout manager will be used on instances of the base Ext.Component class +which simply sizes the Component's encapsulating element to the height and width specified in the setSize method.

+ +
 
Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content +for this comp...

Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content +for this component.

+ + +
    +
  • Description : +
    This config option is used to take an existing HTML element and place it in the layout element +of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.
  • +
  • Notes : +
    The specified HTML element is appended to the layout element of the component after any configured +HTML has been inserted, and so the document will not contain this element at the time the render event is fired.
    +
    The specified HTML element used will not participate in any layout +scheme that the Component may use. It is just HTML. Layouts operate on child items.
    +
    Add either the x-hidden or the x-hide-display CSS class to +prevent a brief flicker of the content before it is rendered to the panel.
  • +
+ +
 

The initial set of data to apply to the tpl to +update the content area of the Component.

+

The initial set of data to apply to the tpl to +update the content area of the Component.

+
 

Defaults to false.

+

Defaults to false.

+
 

CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.

+

CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.

+
 

Allows the component to be dragged.

+

Allows the component to be dragged.

+
 

Create the Component as a floating and use absolute positioning. +Defaults to false.

+

Create the Component as a floating and use absolute positioning. +Defaults to false.

+
 
Specify as true to have the Component inject framing elements within the Component at render time to +provide a graphi...

Specify as true to have the Component inject framing elements within the Component at render time to +provide a graphical rounded frame around the Component content.

+ + +

This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet Explorer +prior to version 9 which do not support rounded corners natively.

+ + +

The extra space taken up by this framing is available from the read only property frameSize.

+ +
 

The height of this component in pixels.

+

The height of this component in pixels.

+
 

Defaults to false.

+

Defaults to false.

+
 
A String which specifies how this Component's encapsulating DOM element will be hidden. +Values may be +'display' : The...

A String which specifies how this Component's encapsulating DOM element will be hidden. +Values may be

    +
  • 'display' : The Component will be hidden using the display: none style.
  • +
  • 'visibility' : The Component will be hidden using the visibility: hidden style.
  • +
  • 'offsets' : The Component will be hidden by absolutely positioning it out of the visible area of the document. This +is useful when a hidden Component must maintain measurable dimensions. Hiding using display results +in a Component having zero dimensions.
+Defaults to 'display'.

+
 
An HTML fragment, or a DomHelper specification to use as the layout element +content (defaults to ''). The HTML conten...

An HTML fragment, or a DomHelper specification to use as the layout element +content (defaults to ''). The HTML content is added after the component is rendered, +so the document will not contain this HTML at the time the render event is fired. +This content is inserted into the body before any configured contentEl is appended.

+
 
The unique id of this component instance (defaults to an auto-assigned id). + + +It should not be necessary to use this ...

The unique id of this component instance (defaults to an auto-assigned id).

+ + +

It should not be necessary to use this configuration except for singleton objects in your application. +Components created with an id may be accessed globally using Ext.getCmp.

+ + +

Instead of using assigned ids, use the itemId config, and ComponentQuery which +provides selector-based searching for Sencha Components analogous to DOM querying. The Container +class contains shortcut methods to query its descendant Components by selector.

+ + +

Note that this id will also be used as the element id for the containing HTML element +that is rendered to the page for this component. This allows you to write id-based CSS +rules to style the specific instance of this component uniquely, and also to select +sub-elements using this component's id as the parent.

+ + +

Note: to avoid complications imposed by a unique id also see itemId.

+ + +

Note: to access the container of a Component see ownerCt.

+ +
 
An itemId can be used as an alternative way to get a reference to a component +when no object reference is available. ...

An itemId can be used as an alternative way to get a reference to a component +when no object reference is available. Instead of using an id with +Ext.getCmp, use itemId with +Ext.container.Container.getComponent which will retrieve +itemId's or id's. Since itemId's are an index to the +container's internal MixedCollection, the itemId is scoped locally to the container -- +avoiding potential conflicts with Ext.ComponentManager which requires a unique +id.

+ + +
var c = new Ext.panel.Panel({ //
+    height: 300,
+    renderTo: document.body,
+    layout: 'auto',
+    items: [
+        {
+            itemId: 'p1',
+            title: 'Panel 1',
+            height: 150
+        },
+        {
+            itemId: 'p2',
+            title: 'Panel 2',
+            height: 150
+        }
+    ]
+})
+p1 = c.getComponent('p1'); // not the same as Ext.getCmp()
+p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling
+
+ + +

Also see id, query, down and child.

+ + +

Note: to access the container of an item see ownerCt.

+ +
 
(optional) A config object containing one or more event handlers to be added to this +object during initialization. T...

(optional)

A config object containing one or more event handlers to be added to this +object during initialization. This should be a valid listeners config object as specified in the +addListener example for attaching multiple handlers at once.

+ +

DOM events from ExtJs Components

+ + +

While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this + + +

is usually only done when extra value can be added. For example the DataView's +click event passing the node clicked on. To access DOM +events directly from a child element of a Component, we need to specify the element option to +identify the Component property to add a DOM listener to:

+ +
new Ext.panel.Panel({
+    width: 400,
+    height: 200,
+    dockedItems: [{
+        xtype: 'toolbar'
+    }],
+    listeners: {
+        click: {
+            element: 'el', //bind to the underlying el property on the panel
+            fn: function(){ console.log('click el'); }
+        },
+        dblclick: {
+            element: 'body', //bind to the underlying body property on the panel
+            fn: function(){ console.log('dblclick body'); }
+        }
+    }
+});
+
+ + +

+
 
loader : Ext.ComponentLoader/Object

A configuration object or an instance of a Ext.ComponentLoader to load remote +content for this Component.

+

A configuration object or an instance of a Ext.ComponentLoader to load remote +content for this Component.

+
 
Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or +it can be ...

Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or +it can be a CSS style specification for each style, for example: '10 5 3 10'.

+
 
The maximum value in pixels which this Component will set its height to. + + +Warning: This will override any size manag...

The maximum value in pixels which this Component will set its height to.

+ + +

Warning: This will override any size management applied by layout managers.

+ +
 
The maximum value in pixels which this Component will set its width to. + + +Warning: This will override any size manage...

The maximum value in pixels which this Component will set its width to.

+ + +

Warning: This will override any size management applied by layout managers.

+ +
 
The minimum value in pixels which this Component will set its height to. + + +Warning: This will override any size manag...

The minimum value in pixels which this Component will set its height to.

+ + +

Warning: This will override any size management applied by layout managers.

+ +
 
The minimum value in pixels which this Component will set its width to. + + +Warning: This will override any size manage...

The minimum value in pixels which this Component will set its width to.

+ + +

Warning: This will override any size management applied by layout managers.

+ +
 
An optional extra CSS class that will be added to this component's Element when the mouse moves +over the Element, and...

An optional extra CSS class that will be added to this component's Element when the mouse moves +over the Element, and removed when the mouse moves out. (defaults to ''). This can be +useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.

+
 
Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or +it can b...

Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or +it can be a CSS style specification for each style, for example: '10 5 3 10'.

+
 
An object or array of objects that will provide custom functionality for this component. The only +requirement for a ...

An object or array of objects that will provide custom functionality for this component. The only +requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component. +When a component is created, if any plugins are available, the component will call the init method on each +plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the +component as needed to provide its functionality.

+
 
An object containing properties specifying DomQuery selectors which identify child elements +created by the render pro...

An object containing properties specifying DomQuery selectors which identify child elements +created by the render process.

+ +

After the Component's internal structure is rendered according to the renderTpl, this object is iterated through, +and the found Elements are added as properties to the Component using the renderSelector property name.

+ +

For example, a Component which rendered an image, and description into its element might use the following properties +coded into its prototype:

+ +
renderTpl: '<img src="{imageUrl}" class="x-image-component-img"><div class="x-image-component-desc">{description}>/div<',
+
+renderSelectors: {
+    image: 'img.x-image-component-img',
+    descEl: 'div.x-image-component-desc'
+}
+
+ +

After rendering, the Component would have a property image referencing its child img Element, +and a property descEl referencing the div Element which contains the description.

+
 
Specify the id of the element, a DOM element or an existing Element that this component +will be rendered into. + + + +Not...

Specify the id of the element, a DOM element or an existing Element that this component +will be rendered into.

+ + +
    +
  • Notes :
      +
      Do not use this option if the Component is to be a child item of +a Container. It is the responsibility of the +Container's layout manager +to render and manage its child items.
      +
      When using this config, a call to render() is not required.
      +
  • +
+ + +

See render also.

+ +
 
An XTemplate used to create the internal structure inside this Component's +encapsulating Element. + + +You do not normal...

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

+ + +

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

+ + +

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

+ + +

Upon rendering, any created child elements may be automatically imported into object properties using the +renderSelectors option.

+ +
 

A buffer to be applied if many state events are fired within +a short period. Defaults to 100.

+

A buffer to be applied if many state events are fired within +a short period. Defaults to 100.

+
 
An array of events that, when fired, should trigger this object to +save its state (defaults to none). stateEvents may...

An array of events that, when fired, should trigger this object to +save its state (defaults to none). stateEvents may be any type +of event supported by this object, including browser or custom events +(e.g., ['click', 'customerchange']).

+ + +

See stateful for an explanation of saving and +restoring object state.

+ +
 
The unique id for this object to use for state management purposes. + +See stateful for an explanation of saving and re...

The unique id for this object to use for state management purposes.

+ +

See stateful for an explanation of saving and restoring state.

+ +
 
A flag which causes the object to attempt to restore the state of +internal properties from a saved state on startup. ...

A flag which causes the object to attempt to restore the state of +internal properties from a saved state on startup. The object must have +a stateId for state to be managed. +Auto-generated ids are not guaranteed to be stable across page loads and +cannot be relied upon to save and restore the same state for a object.

+

For state saving to work, the state manager's provider must have been +set to an implementation of Ext.state.Provider which overrides the +set and get +methods to save and recall name/value pairs. A built-in implementation, +Ext.state.CookieProvider is available.

+

To set the state provider for the current page:

+
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
+    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
+}));
+
+

A stateful object attempts to save state when one of the events +listed in the stateEvents configuration fires.

+

To save state, a stateful object first serializes its state by +calling getState. By default, this function does +nothing. The developer must provide an implementation which returns an +object hash which represents the restorable state of the object.

+

The value yielded by getState is passed to Ext.state.Manager.set +which uses the configured Ext.state.Provider to save the object +keyed by the stateId

. +

During construction, a stateful object attempts to restore +its state by calling Ext.state.Manager.get passing the +stateId

+

The resulting object is passed to applyState. +The default implementation of applyState simply copies +properties into the object, but a developer may override this to support +more behaviour.

+

You can perform extra processing on state save and restore by attaching +handlers to the beforestaterestore, staterestore, +beforestatesave and statesave events.

+ +
 
A custom style specification to be applied to this component's Element. Should be a valid argument to +Ext.core.Eleme...

A custom style specification to be applied to this component's Element. Should be a valid argument to +Ext.core.Element.applyStyles.

+ +
        new Ext.panel.Panel({
+            title: 'Some Title',
+            renderTo: Ext.getBody(),
+            width: 400, height: 300,
+            layout: 'form',
+            items: [{
+                xtype: 'textarea',
+                style: {
+                    width: '95%',
+                    marginBottom: '10px'
+                }
+            },
+            new Ext.button.Button({
+                text: 'Send',
+                minWidth: '100',
+                style: {
+                    marginBottom: '10px'
+                }
+            })
+            ]
+        });
+     
+ +
 

The class that is added to the content target when you set styleHtmlContent to true. +Defaults to 'x-html'

+

The class that is added to the content target when you set styleHtmlContent to true. +Defaults to 'x-html'

+
 

True to automatically style the html inside the content target of this component (body for panels). +Defaults to false.

+

True to automatically style the html inside the content target of this component (body for panels). +Defaults to false.

+
 
An Ext.Template, Ext.XTemplate +or an array of strings to form an Ext.XTemplate. +Used in conjunction with the data and...

An Ext.Template, Ext.XTemplate +or an array of strings to form an Ext.XTemplate. +Used in conjunction with the data and +tplWriteMode configurations.

+
 
The Ext.(X)Template method to use when +updating the content area of the Component. Defaults to 'overwrite' +(see Ext.X...

The Ext.(X)Template method to use when +updating the content area of the Component. Defaults to 'overwrite' +(see Ext.XTemplate.overwrite).

+
 

A set style for a component. Can be a string or an Array of multiple strings (UIs)

+

A set style for a component. Can be a string or an Array of multiple strings (UIs)

+
 

The width of this component in pixels.

+

The width of this component in pixels.

+
Defined By

Properties

 

Read-only property indicating whether or not the component can be dragged

+

Read-only property indicating whether or not the component can be dragged

+
 
Read-only property indicating the width of any framing elements which were added within the encapsulating element +to ...

Read-only property indicating the width of any framing elements which were added within the encapsulating element +to provide graphical, rounded borders. See the frame config.

+ + +

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

+ + +
    +
  • top The width of the top framing element in pixels.
  • +
  • right The width of the right framing element in pixels.
  • +
  • bottom The width of the bottom framing element in pixels.
  • +
  • left The width of the left framing element in pixels.
  • +
+ +
 
@deprecated 4.0 Replaced by getActiveAnimation +Returns thq current animation if this object has any effects actively ...

@deprecated 4.0 Replaced by getActiveAnimation +Returns thq current animation if this object has any effects actively running or queued, else returns false.

+
 
This is an internal flag that you use when creating custom components. +By default this is set to true which means tha...

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 its disabled. +Components like FieldContainer, FieldSet, Field, Button, Tab override this property to false +since they want to implement custom disable logic.

+
 
This Component's owner Container (defaults to undefined, and is set automatically when +this Component is added to a C...

This Component's owner Container (defaults to undefined, and is set automatically when +this Component is added to a Container). Read-only.

+ +

Note: to access items within the Container see itemId.

+ +
 

Read-only property indicating whether or not the component has been rendered.

+

Read-only property indicating whether or not the component has been rendered.

+
 
Stops any running effects and clears this object's internal effects queue if it contains +any additional effects that ...

Stops any running effects and clears this object's internal effects queue if it contains +any additional effects that haven't started yet.

+
Defined By

Methods

 
addClass( +String cls) + : Ext.Component

@deprecated 4.0 Replaced by {link:#addCls} +Adds a CSS class to the top level element representing this component.

+

@deprecated 4.0 Replaced by {link:#addCls} +Adds a CSS class to the top level element representing this component.

+

Parameters

  • cls : String

    The CSS class name to add

    +

Returns

  • Ext.Component   

    Returns the Component to allow method chaining.

    +
 
addCls( +String cls) + : Ext.Component

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

+

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

+

Parameters

  • cls : String

    The CSS class name to add

    +

Returns

  • Ext.Component   

    Returns the Component to allow method chaining.

    +
 

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

+

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

+

Parameters

  • cls : String/Array

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

    +

Returns

  • void    +
 
addEvents( +Object/String o, String ) + : void

Adds the specified events to the list of events which this Observable may fire.

+

Adds the specified events to the list of events which this Observable may fire.

+

Parameters

  • o : Object/String

    Either an object with event names as properties with a value of true +or the first event name string if multiple event names are being passed as separate parameters.

    +
  • : String

    [additional] Optional additional event names if multiple event names are being passed as separate parameters. +Usage:

    + +
    this.addEvents('storeloaded', 'storecleared');
    +
    + +

Returns

  • void    +
 
addListener( +String eventName, Function handler, [Object scope], [Object options]) + : void

Appends an event handler to this object.

+

Appends an event handler to this object.

+

Parameters

  • eventName : String

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

    +
  • handler : Function

    The method the event invokes.

    +
  • scope : Object

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

    +
  • options : Object

    (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 the object which fired the event.
    • +
    • 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.
    • +
    • target : Observable
      Only call the handler if the event was fired on the target Observable, not +if the event was bubbled up from a child Observable.
    • +
    • element : String
      This option is only valid for listeners bound to Components. +The name of a Component property which references an element to add a listener to.

      + +

      This option is useful during Component construction to add DOM event listeners to elements of Components which +will exist only after the Component is rendered. For example, to add a click listener to a Panel's body: +

      new Ext.panel.Panel({
      +    title: 'The title',
      +    listeners: {
      +        click: this.handlePanelClick,
      +        element: 'body'
      +    }
      +});
      +

      + + +

      When added in this way, the options available are the options applicable to Ext.core.Element.addListener

      + + +

    • +

    + +

    +Combining Options
    +Using the options argument, it is possible to combine different types of listeners:
    +
    +A delayed, one-time listener. +

    myPanel.on('hide', this.handleClick, this, {
    +single: true,
    +delay: 100
    +});
    +

    +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 events. For example: +

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

    + +

Returns

  • void    +
 
addManagedListener( +Observable/Element item, Object/String ename, Function fn, Object scope, Object opt) + : void

Adds listeners to any Observable object (or Element) which are automatically removed when this Component +is destroyed. + +

Adds listeners to any Observable object (or Element) which are automatically removed when this Component +is destroyed. + +

Parameters

  • item : Observable/Element

    The item to which to add a listener/listeners.

    +
  • ename : Object/String

    The event name, or an object containing event name properties.

    +
  • fn : Function

    Optional. If the ename parameter was an event name, this +is the handler function.

    +
  • scope : Object

    Optional. If the ename parameter was an event name, this +is the scope (this reference) in which the handler function is executed.

    +
  • opt : Object

    Optional. If the ename parameter was an event name, this +is the addListener options.

    +

Returns

  • void    +
 
addStateEvents( +String/Array events) + : void

Add events that will trigger the state to be saved.

+

Add events that will trigger the state to be saved.

+

Parameters

  • events : String/Array

    The event name or an array of event names.

    +

Returns

  • void    +
 
afterComponentLayout( +Number adjWidth, Number adjHeight, Boolean isSetSize, Ext.Component layoutOwner) + : void

 

+

Parameters

  • adjWidth : Number

    The box-adjusted width that was set

    +
  • adjHeight : Number

    The box-adjusted height that was set

    +
  • isSetSize : Boolean

    Whether or not the height/width are stored on the component permanently

    +
  • layoutOwner : Ext.Component

    Component which sent the layout. Only used when isSetSize is false.

    +

Returns

  • void    +
 
animate( +Object config) + : Object
Perform custom animation on this object. +This method is applicable to both the the Component class and the Element cl...

Perform custom animation on this object.

+

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

+

The sole parameter is an object which specifies start property values, end property values, and properties which +describe the timeline. Of the properties listed below, only to is mandatory.

+

Properties include

    +
  • from
    An object which specifies start values for the properties being animated. +If not supplied, properties are animated from current settings. The actual properties which may be animated depend upon +ths object being animated. See the sections below on Element and Component animation.
  • +
  • to
    An object which specifies end values for the properties being animated.
  • +
  • duration
    The duration in milliseconds for which the animation will run.
  • +
  • easing
    A string value describing an easing type to modify the rate of change from the default linear to non-linear. Values may be one of:
      +
    • ease
    • +
    • easeIn
    • +
    • easeOut
    • +
    • easeInOut
    • +
    • backIn
    • +
    • backOut
    • +
    • elasticIn
    • +
    • elasticOut
    • +
    • bounceIn
    • +
    • bounceOut
    • +
  • +
  • keyframes
    This is an object which describes the state of animated properties at certain points along the timeline. +it is an object containing properties who's names are the percentage along the timeline being described and who's values specify the animation state at that point.
  • +
  • listeners
    This is a standard listeners configuration object which may be used +to inject behaviour at either the beforeanimate event or the afteranimate event.
  • +

+

Animating an Element

+When animating an 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 scrollLeft value.
  • +
  • opacity
    The element's opacity value. This must be a value between 0 and 1.
  • +
+

Be aware than 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.

+

Animating a Component

+When animating an Element, 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.
  • +
  • width
    The Component's width 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 : Object

    An object containing properties which describe the animation's start and end states, and the timeline of the animation.

    +

Returns

  • Object   

    this

    +
 
Applies the state to the object. This should be overridden in subclasses to do +more complex state operations. By defa...

Applies the state to the object. This should be overridden in subclasses to do +more complex state operations. By default it applies the state properties onto +the current object.

+

Parameters

  • state : Object

    The state

    +

Returns

  • void    +
 
beforeComponentLayout( +Number adjWidth, Number adjHeight, Boolean isSetSize, Ext.Component layoutOwner) + : void
Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout +from being ex...

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

+

Parameters

  • adjWidth : Number

    The box-adjusted width that was set

    +
  • adjHeight : Number

    The box-adjusted height that was set

    +
  • isSetSize : Boolean

    Whether or not the height/width are stored on the component permanently

    +
  • layoutOwner : Ext.Component

    Component which sent the layout. Only used when isSetSize is false.

    +

Returns

  • void    +
 
capture( +Observable o, Function fn, [Object scope]) + : void
Starts capture on the specified Observable. All events will be passed +to the supplied function with the event name + ...

Starts capture on the specified Observable. All events will be passed +to the supplied function with the event name + standard signature of the event +before the event is fired. If the supplied function returns false, +the event will not fire.

+

Parameters

  • o : Observable

    The Observable to capture events from.

    +
  • fn : Function

    The function to call when an event is fired.

    +
  • scope : Object

    (optional) The scope (this reference) in which the function is executed. Defaults to the Observable firing the event.

    +

Returns

  • void    +
 

Removes all listeners for this object including the managed listeners

+

Removes all listeners for this object including the managed listeners

+

Returns

  • void    +
 

Removes all managed listeners for this object.

+

Removes all managed listeners for this object.

+

Returns

  • void    +
 

Destroys the Component.

+

Destroys the Component.

+

Returns

  • void    +
 
disable( +Boolean silent) + : void

Disable the component.

+

Disable the component.

+

Parameters

  • silent : Boolean

    Passing true, will supress the 'disable' event from being fired.

    +

Returns

  • void    +
 
Handles autoRender. +Floating Components may have an ownerCt. If they are asking to be constrained, constrain them wit...

Handles autoRender. +Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that +ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body

+

Returns

  • void    +
 
doComponentLayout( +Object width, Object height, Object isSetSize, Object ownerCt) + : Ext.container.Container
This method needs to be called whenever you change something on this component that requires the Component's +layout t...

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

+

Parameters

  • width : Object
    +
  • height : Object
    +
  • isSetSize : Object
    +
  • ownerCt : Object
    +

Returns

  • Ext.container.Container   

    this

    +
 
enable( +Boolean silent) + : void

Enable the component

+

Enable the component

+

Parameters

  • silent : Boolean

    Passing false will supress the 'enable' event from being fired.

    +

Returns

  • void    +
 
enableBubble( +String/Array events) + : void
Enables events fired by this Observable to bubble up an owner hierarchy by calling +this.getBubbleTarget() if present....

Enables events fired by this Observable to bubble up an owner hierarchy by calling +this.getBubbleTarget() if present. There is no implementation in the Observable base class.

+ + +

This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default +implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to +access the required target more quickly.

+ + +

Example:

+ + +
Ext.override(Ext.form.field.Base, {
+//  Add functionality to Field's initComponent to enable the change event to bubble
+initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
+    this.enableBubble('change');
+}),
+
+//  We know that we want Field's events to bubble directly to the FormPanel.
+getBubbleTarget : function() {
+    if (!this.formPanel) {
+        this.formPanel = this.findParentByType('form');
+    }
+    return this.formPanel;
+}
+});
+
+var myForm = new Ext.formPanel({
+title: 'User Details',
+items: [{
+    ...
+}],
+listeners: {
+    change: function() {
+        // Title goes red if form has been modified.
+        myForm.header.setStyle('color', 'red');
+    }
+}
+});
+
+ +

Parameters

  • events : String/Array

    The event name to bubble, or an Array of event names.

    +

Returns

  • void    +
 
This method finds the topmost active layout who's processing will eventually determine the size and position of this +...

This method finds the topmost active layout who's processing will eventually determine the size and position of this +Component.

+

This method is useful when dynamically adding Components into Containers, and some processing must take place after the +final sizing and positioning of the Component has been performed.

+ +

Returns

  • void    +
 
fireEvent( +String eventName, Object... args) + : Boolean
Fires the specified event with the passed parameters (minus the event name). + + +An event may be set to bubble up an Ob...

Fires the specified event with the passed parameters (minus the event name).

+ + +

An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) +by calling enableBubble.

+ +

Parameters

  • eventName : String

    The name of the event to fire.

    +
  • args : Object...

    Variable number of parameters are passed to handlers.

    +

Returns

  • Boolean   

    returns false if any of the handlers return false otherwise it returns true.

    +
 

Returns thq current animation if this object has any effects actively running or queued, else returns false.

+

Returns thq current animation if this object has any effects actively running or queued, else returns false.

+

Returns

  • Mixed   

    anim if element has active effects, else false

    +
 

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

+

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

+

Returns

  • Ext.container.Container   

    the Container which owns this Component.

    +
 

Retrieves the top level element representing this component.

+

Retrieves the top level element representing this component.

+

Returns

  • void    +
 

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

+

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

+

Returns

  • Number    +
 

Retrieves the id of this component. +Will autogenerate an id if one has not already been set.

+

Retrieves the id of this component. +Will autogenerate an id if one has not already been set.

+

Returns

  • void    +
 
getInsertPosition( +String/Number/Element/HTMLElement position) + : HTMLElement
This function takes the position argument passed to onRender and returns a +DOM element that you can use in the insert...

This function takes the position argument passed to onRender and returns a +DOM element that you can use in the insertBefore.

+

Parameters

  • position : String/Number/Element/HTMLElement

    Index, element id or element you want +to put this component before.

    +

Returns

  • HTMLElement   

    DOM element that you can use in the insertBefore

    +
 

Gets the Ext.ComponentLoader for this Component.

+

Gets the Ext.ComponentLoader for this Component.

+

Returns

  • Ext.ComponentLoader   

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

    +
 
getPlugin( +Object pluginId) + : Ext.AbstractPlugin

Retrieves a plugin by its pluginId which has been bound to this +component.

+

Retrieves a plugin by its pluginId which has been bound to this +component.

+

Parameters

  • pluginId : Object
    +

Returns

  • Ext.AbstractPlugin   

    pluginInstance

    +
 

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

+

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

+

Returns

  • Object   

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

    +
 
Gets the current state of the object. By default this function returns null, +it should be overridden in subclasses to...

Gets the current state of the object. By default this function returns null, +it should be overridden in subclasses to implement methods for getting the state.

+

Returns

  • Object   

    The current state

    +
 

Gets the state id for this object.

+

Gets the state id for this object.

+

Returns

  • String   

    The state id, null if not found.

    +
 

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

+

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

+

Returns

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

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

  • String   

    The xtype hierarchy string

    +
 
hasListener( +String eventName) + : Boolean

Checks to see if this object has any listeners for a specified event

+

Checks to see if this object has any listeners for a specified event

+

Parameters

  • eventName : String

    The name of the event to check for

    +

Returns

  • Boolean   

    True if the event is being listened for, else false

    +
 

Checks if there is currently a specified uiCls

+

Checks if there is currently a specified uiCls

+

Parameters

  • cls : String

    The cls to check

    +

Returns

  • void    +
 
is( +String selector) + : Boolean

Tests whether this Component matches the selector string.

+

Tests whether this Component matches the selector string.

+

Parameters

  • selector : String

    The selector string to test against.

    +

Returns

  • Boolean   

    True if this Component matches the selector.

    +
 
isDescendantOf( +Ext.Container container) + : Boolean

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

+

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

+

Parameters

  • container : Ext.Container
    +

Returns

  • Boolean   

    isDescendant

    +
 

Method to determine whether this Component is currently disabled.

+

Method to determine whether this Component is currently disabled.

+

Returns

  • Boolean   

    the disabled state of this Component.

    +
 

Method to determine whether this Component is draggable.

+

Method to determine whether this Component is draggable.

+

Returns

  • Boolean   

    the draggable state of this component.

    +
 

Method to determine whether this Component is droppable.

+

Method to determine whether this Component is droppable.

+

Returns

  • Boolean   

    the droppable state of this component.

    +
 

Method to determine whether this Component is floating.

+

Method to determine whether this Component is floating.

+

Returns

  • Boolean   

    the floating state of this component.

    +
 

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

+

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

+

Returns

  • Boolean   

    the hidden state of this Component.

    +
 
isVisible( +Boolean deep) + : Boolean

Returns true if this component is visible.

+

Returns true if this component is visible.

+

Parameters

  • deep : Boolean

    .

    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.

    + +

Returns

  • Boolean   

    True if this component is visible, false otherwise.

    +
 
isXType( +String xtype, [Boolean shallow]) + : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended +from th...

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 : String

    The xtype to check for this Component

    +
  • shallow : Boolean

    (optional) False to check whether this Component is descended from the xtype (this is +the default), or true to check whether this Component is directly of the specified xtype.

    +

Returns

  • Boolean   

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

    +
 
nextNode( +String selector, Object includeSelf) + : void
Returns the next node in the Component tree in tree traversal order. + + +Note that this is not limited to siblings, and...

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 pnextSibling.

+ +

Parameters

  • selector : String

    Optional A ComponentQuery selector to filter the following nodes.

    +
  • includeSelf : Object
    +

Returns

  • void   

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

    +
 
Returns the next sibling of this Component. + + +Optionally selects the next sibling which matches the passed ComponentQ...

Returns the next sibling of this Component.

+ + +

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

+ + +

May also be refered 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 : String

    Optional A ComponentQuery selector to filter the following items.

    +

Returns

  • void   

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

    +
 
observe( +Function c, Object listeners) + : void
Sets observability on the passed class constructor. + +This makes any event fired on any instance of the passed class a...

Sets observability on the passed class constructor.

+ +

This makes any event fired on any instance of the passed class also fire a single event through +the class allowing for central handling of events on many instances at once.

+ +

Usage:

+ +
Ext.util.Observable.observe(Ext.data.Connection);
+Ext.data.Connection.on('beforerequest', function(con, options) {
+    console.log('Ajax request made to ' + options.url);
+});
+
+

Parameters

  • c : Function

    The class constructor to make observable.

    +
  • listeners : Object

    An object containing a series of listeners to add. See addListener.

    +

Returns

  • void    +
 
on( +String eventName, Function handler, [Object scope], [Object options]) + : void

Appends an event handler to this object (shorthand for addListener.)

+

Appends an event handler to this object (shorthand for addListener.)

+

Parameters

  • eventName : String

    The type of event to listen for

    +
  • handler : Function

    The method the event invokes

    +
  • scope : Object

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

    +
  • options : Object

    (optional) An object containing handler configuration.

    +

Returns

  • void    +
 
previousNode( +String selector, Object includeSelf) + : void
Returns the previous node in the Component tree in tree traversal order. + + +Note that this is not limited to siblings,...

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 : String

    Optional. A ComponentQuery selector to filter the preceding nodes.

    +
  • includeSelf : Object
    +

Returns

  • void   

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

    +
 
Returns the previous sibling of this Component. + + +Optionally selects the previous sibling which matches the passed Co...

Returns the previous sibling of this Component.

+ + +

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

+ + +

May also be refered 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 : String

    Optional. A ComponentQuery selector to filter the preceding items.

    +

Returns

  • void   

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

    +
 
relayEvents( +Object origin, Array events, Object prefix) + : void

Relays selected events from the specified Observable as if the events were fired by this.

+

Relays selected events from the specified Observable as if the events were fired by this.

+

Parameters

  • origin : Object

    The Observable whose events this object is to relay.

    +
  • events : Array

    Array of event names to relay.

    +
  • prefix : Object
    +

Returns

  • void    +
 

Removes all added captures from the Observable.

+

Removes all added captures from the Observable.

+

Parameters

  • o : Observable

    The Observable to release

    +

Returns

  • void    +
 
removeCls( +Object className) + : Ext.Component

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

+

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

+

Parameters

  • className : Object
    +

Returns

  • Ext.Component   

    Returns the Component to allow method chaining.

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

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

+

Parameters

  • cls : String/Array

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

    +

Returns

  • void    +
 
removeListener( +String eventName, Function handler, [Object scope]) + : void

Removes an event handler.

+

Removes an event handler.

+

Parameters

  • eventName : String

    The type of event the handler was associated with.

    +
  • handler : Function

    The handler to remove. This must be a reference to the function passed into the addListener call.

    +
  • scope : Object

    (optional) The scope originally specified for the handler.

    +

Returns

  • void    +
 
removeManagedListener( +Observable|Element item, Object|String ename, Function fn, Object scope) + : void

Removes listeners that were added by the mon method.

+

Removes listeners that were added by the mon method.

+

Parameters

  • item : Observable|Element

    The item from which to remove a listener/listeners.

    +
  • ename : Object|String

    The event name, or an object containing event name properties.

    +
  • fn : Function

    Optional. If the ename parameter was an event name, this +is the handler function.

    +
  • scope : Object

    Optional. If the ename parameter was an event name, this +is the scope (this reference) in which the handler function is executed.

    +

Returns

  • void    +
 
Resume firing events. (see suspendEvents) +If events were suspended using the queueSuspended parameter, then all +event...

Resume firing events. (see suspendEvents) +If events were suspended using the queueSuspended parameter, then all +events fired during event suspension will be sent to any listeners now.

+

Returns

  • void    +
 
Ensures that all effects queued after sequenceFx is called on this object are +run in sequence. This is the opposite ...

Ensures that all effects queued after sequenceFx is called on this object are +run in sequence. This is the opposite of syncFx.

+

Returns

  • Ext.core.Element   

    The Element

    +
 
setDisabled( +Boolean disabled) + : void

Enable or disable the component.

+

Enable or disable the component.

+

Parameters

  • disabled : Boolean
    +

Returns

  • void    +
 
setDocked( +Object dock, Object layoutParent) + : Component
Sets the dock position of this component in its parent panel. Note that +this only has effect if this item is part of ...

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 : Object
    +
  • layoutParent : Object
    +

Returns

  • Component   

    this

    +
 
setHeight( +Number height) + : Ext.Component

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

+

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

+

Parameters

  • height : Number

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

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

    +

Returns

  • Ext.Component   

    this

    +
 
setLoading( +Boolean/Object/String load, Boolean targetEl) + : Ext.LoadMask

This method allows you to show or hide a LoadMask on top of this component.

+

This method allows you to show or hide a LoadMask on top of this component.

+

Parameters

  • load : Boolean/Object/String

    True to show the default LoadMask, a config object +that will be passed to the LoadMask constructor, or a message String to show. False to +hide the current LoadMask.

    +
  • targetEl : Boolean

    True to mask the targetEl of this Component instead of the this.el. +For example, setting this to true on a Panel will cause only the body to be masked. (defaults to false)

    +

Returns

  • Ext.LoadMask   

    The LoadMask instance that has just been shown.

    +
 
setPosition( +Number left, Number top) + : Ext.Component
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. +This method fires ...

Sets the left and top of the component. To set the page XY position instead, use setPagePosition. +This method fires the move event.

+

Parameters

  • left : Number

    The new left

    +
  • top : Number

    The new top

    +

Returns

  • Ext.Component   

    this

    +
 
setSize( +Mixed width, Mixed height) + : Ext.Component
Sets the width and height of this Component. This method fires the resize event. This method can accept +either width ...

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 : Mixed

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

      +
    • A Number specifying the new width in the Element's Ext.core.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 : Mixed

    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.core.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   

    this

    +
 
Sets the UI for the component. This will remove any existing UIs on the component. It will also +loop through any uiCl...

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 : String

    The new UI for the component

    +

Returns

  • void    +
 
setVisible( +Boolean visible) + : Ext.Component

Convenience function to hide or show this component by boolean.

+

Convenience function to hide or show this component by boolean.

+

Parameters

  • visible : Boolean

    True to show, false to hide

    +

Returns

  • Ext.Component   

    this

    +
 
setWidth( +Number width) + : Ext.Component

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

+

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

+

Parameters

  • width : Number

    The new width to setThis may be one of:

    +

Returns

  • Ext.Component   

    this

    +
 
@deprecated 4.0 Replaced by stopAnimation +Stops any running effects and clears this object's internal effects queue i...

@deprecated 4.0 Replaced by stopAnimation +Stops any running effects and clears this object's internal effects queue if it contains +any additional effects that haven't started yet.

+

Returns

  • Ext.core.Element   

    The Element

    +
 
suspendEvents( +Boolean queueSuspended) + : void

Suspend the firing of all events. (see resumeEvents)

+

Suspend the firing of all events. (see resumeEvents)

+

Parameters

  • queueSuspended : Boolean

    Pass as true to queue up suspended events to be fired +after the resumeEvents call instead of discarding all suspended events;

    +

Returns

  • void    +
 
Ensures that all effects queued after syncFx is called on this object are +run concurrently. This is the opposite of ...

Ensures that all effects queued after syncFx is called on this object are +run concurrently. This is the opposite of sequenceFx.

+

Returns

  • Ext.core.Element   

    The Element

    +
 
un( +String eventName, Function handler, [Object scope]) + : void

Removes an event handler (shorthand for removeListener.)

+

Removes an event handler (shorthand for removeListener.)

+

Parameters

  • eventName : String

    The type of event the handler was associated with.

    +
  • handler : Function

    The handler to remove. This must be a reference to the function passed into the addListener call.

    +
  • scope : Object

    (optional) The scope originally specified for the handler.

    +

Returns

  • void    +
 
up( +String selector) + : Container
Walks up the ownerCt axis looking for an ancestor Container which matches +the passed simple selector. + + +Example: +var ...

Walks up the ownerCt axis looking for an ancestor Container which matches +the passed simple selector.

+ + +

Example: +

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

Parameters

  • selector : String

    Optional. The simple selector to test.

    +

Returns

  • Container   

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

    +
 
update( +Mixed htmlOrData, [Boolean loadScripts], [Function callback]) + : void

Update the content area of a component.

+

Update the content area of a component.

+

Parameters

  • htmlOrData : Mixed

    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.core.Element update

    +
  • loadScripts : Boolean

    (optional) Only legitimate when using the html configuration. Defaults to false

    +
  • callback : Function

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

    +

Returns

  • void    +
Defined By

Events

 

Fires after a Component has been visually activated.

+

Fires after a Component has been visually activated.

+

Parameters

  • this : Ext.Component
    +
 
added( +Ext.Component this, Ext.container.Container container, Number pos) +

Fires after a Component had been added to a Container.

+

Fires after a Component had been added to a Container.

+

Parameters

  • this : Ext.Component
    +
  • container : Ext.container.Container

    Parent Container

    +
  • pos : Number

    position of Component

    +
 
Fires after the component rendering is finished. + + +The afterrender event is fired after this Component has been rende...

Fires after the component rendering is finished.

+ + +

The afterrender event is fired after this Component has been rendered, been postprocesed +by any afterRender method defined for the Component.

+ +

Parameters

  • this : Ext.Component
    +
 
Fires before a Component has been visually activated. +Returning false from an event listener can prevent the activate...

Fires before a Component has been visually activated. +Returning false from an event listener can prevent the activate +from occurring.

+

Parameters

  • this : Ext.Component
    +
 
Fires before a Component has been visually deactivated. +Returning false from an event listener can prevent the deacti...

Fires before a Component has been visually deactivated. +Returning false from an event listener can prevent the deactivate +from occurring.

+

Parameters

  • this : Ext.Component
    +
 

Fires before the component is destroyed. Return false from an event handler to stop the destroy.

+

Fires before the component is destroyed. Return false from an event handler to stop the destroy.

+

Parameters

  • this : Ext.Component
    +
 

Fires before the component is hidden when calling the hide method. +Return false from an event handler to stop the hide.

+

Fires before the component is hidden when calling the hide method. +Return false from an event handler to stop the hide.

+

Parameters

  • this : Ext.Component
    +
 

Fires before the component is rendered. Return false from an +event handler to stop the render.

+

Fires before the component is rendered. Return false from an +event handler to stop the render.

+

Parameters

  • this : Ext.Component
    +
 

Fires before the component is shown when calling the show method. +Return false from an event handler to stop the show.

+

Fires before the component is shown when calling the show method. +Return false from an event handler to stop the show.

+

Parameters

  • this : Ext.Component
    +
 
beforestaterestore( +Ext.state.Stateful this, Object state) +

Fires before the state of the object is restored. Return false from an event handler to stop the restore.

+

Fires before the state of the object is restored. Return false from an event handler to stop the restore.

+

Parameters

  • this : Ext.state.Stateful
    +
  • state : Object

    The hash of state values returned from the StateProvider. If this +event is not vetoed, then the state object is passed to applyState. By default, +that simply copies property values into this object. The method maybe overriden to +provide custom state restoration.

    +
 
beforestatesave( +Ext.state.Stateful this, Object state) +

Fires before the state of the object is saved to the configured state provider. Return false to stop the save.

+

Fires before the state of the object is saved to the configured state provider. Return false to stop the save.

+

Parameters

  • this : Ext.state.Stateful
    +
  • state : Object

    The hash of state values. This is determined by calling +getState() on the object. This method must be provided by the +developer to return whetever representation of state is required, by default, Ext.state.Stateful +has a null implementation.

    +
 

Fires after a Component has been visually deactivated.

+

Fires after a Component has been visually deactivated.

+

Parameters

  • this : Ext.Component
    +
 

Fires after the component is destroyed.

+

Fires after the component is destroyed.

+

Parameters

  • this : Ext.Component
    +
 

Fires after the component is disabled.

+

Fires after the component is disabled.

+

Parameters

  • this : Ext.Component
    +
 

Fires after the component is enabled.

+

Fires after the component is enabled.

+

Parameters

  • this : Ext.Component
    +
 
hide( +Ext.Component this) +

Fires after the component is hidden. +Fires after the component is hidden when calling the hide method.

+

Fires after the component is hidden. +Fires after the component is hidden when calling the hide method.

+

Parameters

  • this : Ext.Component
    +
 
move( +Ext.Component this, Number x, Number y) +

Fires after the component is moved.

+

Fires after the component is moved.

+

Parameters

  • this : Ext.Component
    +
  • x : Number

    The new x position

    +
  • y : Number

    The new y position

    +
 
removed( +Ext.Component this, Ext.container.Container ownerCt) +

Fires when a component is removed from an Ext.container.Container

+

Fires when a component is removed from an Ext.container.Container

+

Parameters

  • this : Ext.Component
    +
  • ownerCt : Ext.container.Container

    Container which holds the component

    +
 

Fires after the component markup is rendered.

+

Fires after the component markup is rendered.

+

Parameters

  • this : Ext.Component
    +
 
resize( +Ext.Component this, Number adjWidth, Number adjHeight) +

Fires after the component is resized.

+

Fires after the component is resized.

+

Parameters

  • this : Ext.Component
    +
  • adjWidth : Number

    The box-adjusted width that was set

    +
  • adjHeight : Number

    The box-adjusted height that was set

    +
 
show( +Ext.Component this) +

Fires after the component is shown when calling the show method.

+

Fires after the component is shown when calling the show method.

+

Parameters

  • this : Ext.Component
    +
 
staterestore( +Ext.state.Stateful this, Object state) +

Fires after the state of the object is restored.

+

Fires after the state of the object is restored.

+

Parameters

  • this : Ext.state.Stateful
    +
  • state : Object

    The hash of state values returned from the StateProvider. This is passed +to applyState. By default, that simply copies property values into this +object. The method maybe overriden to provide custom state restoration.

    +
 
statesave( +Ext.state.Stateful this, Object state) +

Fires after the state of the object is saved to the configured state provider.

+

Fires after the state of the object is saved to the configured state provider.

+

Parameters

  • this : Ext.state.Stateful
    +
  • state : Object

    The hash of state values. This is determined by calling +getState() on the object. This method must be provided by the +developer to return whetever representation of state is required, by default, Ext.state.Stateful +has a null implementation.

    +
\ No newline at end of file