Terms, Icons, and Labels

Many classes have shortcut names used when creating (instantiating) a class with a
configuration object. The shortcut name is referred to as an alias (or xtype if the
class extends Ext.Component). The alias/xtype is listed next to the class name of
applicable classes for quick reference.

Access Levels

Framework classes or their members may be specified as private or protected. Else,
the class / member is public. Public, protected, and private are access
descriptors used to convey how and when the class or class member should be used.

Public classes and class members are available for use by any other class or
application code and may be relied upon as a stable and persistent within major product
versions. Public classes and members may safely be extended via a subclass.

Protected class members are stable public members intended to be used by the
owning class or its subclasses. Protected members may safely be extended via a subclass.

Private classes and class members are used internally by the framework and are not
intended to be used by application developers. Private classes and members may change or
be omitted from the framework at any time without notice and should not be relied upon in
application logic.

Member Types

Config - The configuration options for a class.

Property - Set once a class is instantiated. *See Read Only below.

Method - Actions that can be performed by a class. Methods should be read as
instance methods and can only be called from a instance of a given class. Static methods
that can be called directly from the class itself will have a static label next to the
method name. *See Static below.

Event - Events are specific to the framework event system allowing for classes to
programmatically raise an event to be handled by one or more event handler methods. DOM
events, while handled by the framework event system, are not specifically described
within the API documentation. *For DOM events refer to the
event reference page from MDN.

Theme Variable - Variables used by the visual theme engine employed by the
framework.

Theme Mixin - Functions used by the visual theme engine employed by the framework
and may use values set in various Theme Variables.

Member Syntax

Below is an example class member that we can disect to show the syntax of a class member
(the lookupComponent method as viewed from the Ext.button.Button class in this case).

This method converts the passed object into an instanced child component.

This may be overridden in subclasses when special processing needs to be applied to child creation.

Parameters

item :
Object

The config object being added.

Returns

Ext.Component

The component to be added.

Let's look at each part of the member row:

Expand/Collapse - On the left-hand size of the member row is a control used to
expand and collapse each member row to show / hide member details.

Member Name - The name of the class member (lookupComponent in this example)

Method Param - Any required or optional params used by a method (or passed to an
event handler method) will be listed next to the method name within parenthesis
(( item ) in this example)

Return type - The class instance or javascript object returned by the method or
property (Ext.Component in this case). This may be omitted for methods that do not
return anything other than undefined or may display as multiple possible values
separated by a forward slash / signifying that what is returned may depend on the
results of the method call (i.e. a method may return a Component if a get method calls is
successful or false if unsuccessful which would be displayed as
Ext.Component/Boolean).

Flags - Any flags applicable to the member will be displayed next (PROTECTED in
this example - see the Flags section below)

Member Origin - On the right-hand side of the member row is the class where the
member was initially described (Ext.container.Container in this example). The source
class will be displayed as a blue link if the member originates from the current class
and gray if it is inherited from an ancestor or mixed-in class.

Member Source - On the right-hand side below the member origin class is a link to
view the member's source (view source in the example)

Params List - Each param for a class method will be listed using the same name
found above in parenthesis, the type of class or object expected, and a description of
the param (item : Object in the example).

Returns - If a class returns a value other than undefined a "Returns" section
will note the type of class or object returned and a description (Ext.Component in the
example)

Since (not shown in the example) - Some members will show which version of the
product the member was first introduced (i.e. Available since 3.4.0 - not pictured in
the example) just after the member description

Default (not shown in the example) - Configs often show the default config value
to be applied to a class instance if not overridden (i.e. Defaults to: false)

Member Flags

The API documentation uses a number of flags to further commnicate the class member's
function and intent. The label may be represented by a text label, an abbreviation, or
an icon.

Required - Required config when instantiating a class

Bindable - The config has a setter which allows this config to be set via ViewModel
binding

Read Only - The property may be read, but cannot be used to configure /
re-configure a class instance at runtime

Singleton - Singleton classes are instantiated immediately once defined and may not
be instantiated manually

Static - A static method or property is a method or property belonging to the class
itself, not an instance of the class

Deprecated - A class or member that is scheduled for removal in a future
framework version and is provided in the current version for backwards compatibility.Deprecated classes and members will have a message directing you to the preferred class /
method going forward.

Removed - A removed class or member that exists in documentation only as a
reference for users upgrading between framework versions

Template - A method defined within a base class designed to be overridden by
subclasses

Abstract - A class or member may be be defined as abstract. Abstract classes and
members establish a class structure and provide limited, if any, code. Class-specific
code will be furnished via overrides in subclasses.

Preventable - Events marked preventable will not fire if false is returned from
an event handler

Class Icons

- Indicates a framework class

- A singleton framework class. *See the
singleton flag for more information

- Indicates that the class, member, or guide
is new in the currently viewed version

Member Icons

- Indicates a class member of type config

- Indicates a class member of type property

- Indicates a class member of type
method

- Indicates a class member of type event

- Indicates a class member of type
theme variable

- Indicates a class member of type
theme mixin

- Indicates that the class, member, or guide
is new in the currently viewed version

Navigation and Features

Class Member Quick-Nav Menu

Just below the class name on an API doc page is a row of buttons corresponding to the
types of members owned by the current class. Each button shows a count of members by
type (this count is updated as filters are applied). Clicking the button will navigate
you to that member section. Hovering over the member-type button will reveal a popup
menu of all members of that type for quick navigation.

Getter and Setter Methods

Getting and setter methods that correlate to a class config option will show up in the
methods section as well as in the configs section of both the API doc and the member-type
menus just beneath the config they work with. The getter and setter method documentation
will be found in the config row for easy reference.

History Bar

Your page history is kept in localstorage and displayed (using the available real estate)
just below the top title bar. By default, the only search results shown are the pages
matching the product / version you're currently viewing. You can expand what is
displayed by clicking on the button on the
right-hand side of the history bar and choosing the "All" radio option. This will show
all recent pages in the history bar for all products / versions.

Within the history config menu you will also see a listing of your recent page visits.
The results are filtered by the "Current Product / Version" and "All" radio options.
Clicking on the button will clear the history bar as
well as the history kept in local storage.

If "All" is selected in the history config menu the checkbox option for "Show product
details in the history bar" will be enabled. When checked, the product/version for each
historic page will show alongside the page name in the history bar. Hovering the cursor
over the page names in the history bar will also show the product/version as a tooltip.

Search and Filters

Both API docs and guides can be searched for using the search field at the top of the
page.

On API doc pages there is also a filter input field that filters the member rows
using the filter string. In addition to filtering by string you can filter the class
members by access level, inheritance, and read only. This is done using the checkboxes at the top of
the page.

The checkbox at the bottom of the API class navigation tree filters the class list to
include or exclude private classes.

Clicking on an empty search field will show your last 10 searches for quick navigation.

API Doc Class Metadata

Each API doc page (with the exception of Javascript primitives pages) has a menu view of
metadata relating to that class. This metadata view will have one or more of the
following:

Alternate Name - One or more additional class name synonymns (in Ext JS 6.0.0 the
Ext.button.Button class has an alternate class name of Ext.Button). Alternate class
names are commonly maintained for backward compatibility.

Hierarchy - The hierararchy view lists the inheritance chain of the current class
up through its ancestor classes up to the root base class.

Mixins - A list of classes that are mixed into the current class

Inherited Mixins - A list of classes that are mixed into an ancestor of the current
class

Requires - All classes required to be defined for the class to be instantiated

Uses - A list of classes potentially used by the class at some point in its
lifecycle, but not necessarily requried for the class to initially be instantiated

Subclasses - Classes that extend the current class

Expanding and Collapsing Examples and Class Members

Runnable examples (Fiddles) are expanded on a page by default. You can collapse and
expand example code blocks individually using the arrow on the top-left of the code
block. You can also toggle the collapse state of all examples using the toggle button on
the top-right of the page. The toggle-all state will be remembered between page loads.

Class members are collapsed on a page by default. You can expand and collapse members
using the arrow icon on the left of the member row or globally using the expand /
collapse all toggle button top-right.

Desktop -vs- Mobile View

Viewing the docs on narrower screens or browsers will result in a view optimized for a
smaller form factor. The primary differences between the desktop and "mobile" view are:

Global navigation will be located in a menu on the left-hand side accessible via the
hamburger menu icon. The menu houses the following (on most pages):

The name of the current product (as a link to the product landing page)

The Sencha icon used to navigate back to the documentation home page

The product menu drop-down button

Tabs of navigation trees for the API docs and guides

Current context navigation and tools is located on the right-hand side accessible via
the gear icon. The context menu houses teh following:

The global search input field

(API doc) A "Filters" tab with the member filter, expand / collapse all examples
button, expand / collapse all member rows button, the access level filter checkboxes,
and the counts of each member

(API doc) A "Related Classes" tab containing the menu of metadata related to the
current class

(Guides) The table of contents for the guide

Viewing the Class Source

The class source can be viewed by clicking on the class name at the top of an API doc
page. The source for class members can be viewed by clicking on the "view source" link
on the right-hand side of the member row.

Summary

Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
add one of these by using "-" in your call to add() or in your items config rather than creating one directly.

Returns

Parameters

This is a layout that enables anchoring of contained elements relative to the container's dimensions.
If the container is resized, all anchored items are automatically rerendered according to their
anchor rules.

This class is intended to be extended or created via the layout: 'anchor'
config, and should generally not need to be created directly via the new keyword.

AnchorLayout does not have any direct config options (other than inherited ones). By default,
AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the
container using the AnchorLayout can supply an anchoring-specific config property of anchorSize.

If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating
anchor measurements based on it instead, allowing the container to be sized independently of the anchoring
logic if necessary.

privatepri

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:

This config is intended mainly for non-cfg-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. If cfg-floating is true, the value of this config is omitted as if it is true.

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.

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

Returns

Parameters

bindablebind

Specifies the border size 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' (top, right, bottom, left).

For components that have no border by default, setting this won't make the border appear by itself.
You also need to specify border color and style:

Care should be taken when using select or selectNode to find child elements.
The following issues should be considered:

Performance: using selectors can be 10x slower than id lookup.

Over-selecting: selectors are applied after the DOM elements for all children
have been rendered, so selectors can match elements from child components
(including nested versions of the same component) accidentally.

This above issues are most important when using select since it returns multiple
elements.

Parameters

privatepri

An optional extra CSS class that will be added to this component's Element.
The value can be a string, a list of strings separated by spaces, or an array of strings. This can be useful
for adding customized styles to the component or any of its children using standard CSS rules.

The columnWidth property is always evaluated as a percentage and must be a decimal value greater than 0 and
less than 1 (e.g., .25). See the description at the top of Ext.layout.container.Column for
additional usage details when combining width and columnWidth configs within the layout.

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 Ext.form.field.Base) come with their own componentLayout managers.

The Ext.layout.container.Auto 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.

True to constrain this Components within its containing element, false to allow it to fall outside of its containing
element. By default this Component will be rendered to document.body. To render and constrain this Component within
another element specify renderTo.

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

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 event-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-hidden-display CSS class to prevent a brief flicker of the content before it
is rendered to the panel.

bindablebind

If true, this component will be the default scope (this pointer) for events
specified with string names so that the scope can be dynamically resolved. The
component will automatically become the defaultListenerScope if a
controller is specified.

chainablech

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)

bindablebind

Flex may be applied to child items of a box layout (Ext.layout.container.VBox or
Ext.layout.container.HBox). Each child item with a flex property will
fill space (horizontally in hbox, vertically in vbox) according to that item's
relative flex value compared to the sum of all items with a flex value specified.

Any child items that have either a flex of 0 or undefined
will not be 'flexed' (the initial size will not be changed).

Floating Components as child items of a Container

A floating Component may be used as a child item of a Container. This just allows the floating Component to seek
a ZIndexManager by examining the ownerCt chain.

When configured as floating, Components acquire, at render time, a Ext.ZIndexManager which
manages a stack of related floating Components. The ZIndexManager sorts its stack according to
an incrementing access counter and the alwaysOnTop config when the Component's toFront method is called.

The ZIndexManager is found by traversing up the ownerCt chain to find an ancestor which itself is
floating. This is so that descendant floating Components of floating Containers (Such as a ComboBox dropdown
within a Window) can have its zIndex managed relative to any siblings, but always above that floating
ancestor Container.

If no floating ancestor is found, a floating Component registers itself with the default Ext.WindowManager.

Floating components do not participate in the Container's layout. Because of this, they are not rendered until
you explicitly method-show them.

After rendering, the ownerCt reference is deleted, and the floatParent property is set to the found
floating ancestor Container. If no floating ancestor Container was found the floatParent property will
not be set.

A numeric unicode character code to use as the icon for this item. The default
font-family for glyphs can be set globally using
Ext.setGlyphFontFamily(). Alternatively, this
config option accepts a string with the charCode and font-family separated by the
@ symbol. For example '65@My Font Family'.

Parameters

Returns

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.

privatepri

privatepri

privatepri

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

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.

Returns

The unique id of this component instance within its container. See also the
reference config.

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 getCmp, use
itemId with getComponent which will
retrieve itemId's or id's. Since itemId's are an index to the container's
internal collection, the itemId is scoped locally to the container -- avoiding
potential conflicts with Ext.ComponentManager, which requires a uniqueid value.

Returns

Components that achieve their internal layout results using solely CSS with no JS
intervention must set this to true. This allows the component to opt out of the
layout run when used inside certain container layouts such as Ext.layout.container.Form and Ext.layout.container.Auto
resulting in a performance gain. The following components currently use liquid
layout (liquidLayout: true):

Any component that needs to fire these events or to have these methods called during
its life cycle needs to set liquidLayout to false. The following example
demonstrates how to enable the resize event for a
Ext.form.field.TextArea:

bindablebind

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.

While some Ext JS 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 Ext.view.View's itemclick 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:

An alias for addListener. In versions prior to 5.1, listeners
had a generated setter which could be called to add listeners. In 5.1 the listeners
config is not processed using the config system and has no generated setter, so
this method is provided for backward compatibility. The preferred way of
adding listeners is to use the on method.

Returns

bindablebind

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' (top, right, bottom, left).

Parameters

Related to the cfg-childEls configuration which specifies named properties which correspond to component sub-elements.

The name of the element property in this component to mask when masked by a LoadMask.

Defaults to null to indicate that Components cannot by default contain a LoadMask, and that any LoadMask should be rendered into the document body.

For example, Panels use "el" to indicate that the whole panel should be masked. This could be configured to be
"body" so that only the body is masked and toolbars and the header are still mouse-accessible.

When set to true by a component or not set by a component but inherited from
an ancestor container, Ext.data.Validation records are used to automatically
bind validation results for any form field to which a value is bound.

While this config can be set arbitrarily high in the component hierarchy, doing
so can create a lot overhead if most of your form fields do not actually rely on
validators in your data model.

Using this setting for a form that is bound to an Ext.data.Model might look
like this:

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. 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 be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).

privatepri

An array of plugins to be added to this component. Can also be just a single plugin instead of array.

Plugins provide custom functionality for a 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.

Plugins can be added to component by either directly referencing the plugin instance:

privatepri

bindablebind

One or more names of config properties that this component should publish
to its ViewModel. Generally speaking, only properties defined in a class config
block (including ancestor config blocks and mixins) are eligible for publishing
to the viewModel. Some components override this and publish their most useful
configs by default.

Note: We'll discuss publishing properties not found in the config block below.

Values determined to be invalid by component (often form fields and model validations)
will not be published to the ViewModel.

This config uses the cfg-reference to determine the name of the data
object to place in the ViewModel. If reference is not set then this config
is ignored.

By using this config and cfg-reference you can bind configs between
components. For example:

In some cases, users may want to publish a property to the viewModel that is not found in a class
config block. In these situations, you may utilize publishState if the property has a
setter method. Let's use setFieldLabel as an example:

deprecateddep

An object containing properties specifying CSS 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 renders a title and description into its element:

protectedpro

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

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

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

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

Returns

Parameters

Specifies whether the floating component should be given a shadow. Set to true to automatically create an
Ext.Shadow, or a string indicating the shadow's display Ext.Shadow#mode. Set to false to
disable the shadow.

In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed
to a block-level element.

Non-Panel Components

The shrinkWrap config is a class-level config and should be used when defining a
subclass.
It is not intended to be set as a config on instances of a given component.

For non-Panel components, shrinkWrap is a descriptive config only. It should be
set when defining your own custom class including the DOM elements used to
construct the component. The shrinkWrap property does not itself apply styling on
the component elements. Rather, it should describe the CSS styling you've applied
to your custom component (refer to the numeric matrix above).

When a component is owned by a container the layout of that container will inspect
the component's shrinkWrap property during layout. The layout then uses the
content-wrapping policy described by shrinkWrap to correctly size and position the
container's child items.

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']).

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()+(10006060247)), //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.

The Component base class implements getState to save its width and height within the state
only if they were initially configured, and have changed from the configured value.

The Panel class saves its collapsed state in addition to that.

The Grid class saves its column state and store state (sorters and filters and grouper) in addition to its superclass state.

If there is more application state to be save, the developer must provide an implementation which
first calls the superclass method to inherit the above behaviour, and then injects new properties
into the returned object.

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 restoration of more complex application state.

privatepri

bindablebind

The ViewModel is a data provider for this component and its children. The
data contained in the ViewModel is typically used by adding bind configs
to the components that want present or edit this data.

When set, the ViewModel is created and links to any inherited viewModel
instance from an ancestor container as the "parent". The ViewModel hierarchy,
once established, only supports creation or destruction of children. The
parent of a ViewModel cannot be changed on the fly.

If this is a root-level ViewModel, the data model connection is made to this
component's associated Ext.data.Session. This is
determined by calling getInheritedSession.

Parameters

In a Border layout, this can control how the regions (not the center) region lay out if the west or east take full height
or if the north or south region take full width. Also look at the Ext.layout.container.Border#regionWeights on the Border layout. An example to show how you can
take control of this is:

Returns

This property provides a shorter alternative to creating objects than using a full
class name. Using xtype is the most common way to define component instances,
especially in a container. For example, the items in a form containing text fields
could be created explicitly like so:

Each member of the items array is now just a "configuration object". These objects
are used to create and configure component instances. A configuration object can be
manually used to instantiate a component using Ext#widget:

This conversion of configuration objects into instantiated components is done when
a container is created as part of its {Ext.container.AbstractContainer#initComponent}
process. As part of the same process, the items array is converted from its raw
array form into a Ext.util.MixedCollection instance.

properties

privatepri

privatepri

The value true causes config values to be stored on instances using a
property name prefixed with an underscore ("_") character. A value of false
stores config values as properties using their exact name (no prefix).

privatepri

The value true instructs the initConfig method to only honor values for
properties declared in the config block of a class. When false, properties
that are not declared in a config block will be placed on the instance.

readonlyro

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

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

privatepri

readonlyro

This object holds a key for any event that has a listener. The listener may be set
directly on the instance, or on its class or a super class (via observe) or
on the Ext.app.EventBus. The values of this object are truthy
(a non-zero number) and falsy (0 or undefined). They do not represent an exact count
of listeners. The value for an event is truthy if the event must be fired and is
falsy if there is no need to fire the event.

The intended use of this property is to avoid the expense of fireEvent calls when
there are no listeners. This can be particularly helpful when one would otherwise
have to call fireEvent hundreds or thousands of times. It is used like this:

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

readonlyro

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

protectedpro

Get the reference to the current class from which this object was instantiated. Unlike Ext.Base#statics,
this.self is scope-dependent and it's meant to be used for dynamic inheritance. See Ext.Base#statics
for a detailed comparison

For floating Components which are added to a Container, the ZIndexManager is acquired from the first
ancestor Container found which is floating. If no floating ancestor is found, the global Ext.WindowManager is
used.

readonlyro

Only present for Ext.Component#floating Components which were inserted as child items of Containers, and which have a floating
Container in their containment ancestry.

For Ext.Component#floating Components which are child items of a Container, the zIndexParent will be a floating
ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides
a Ext.ZIndexManager which provides z-indexing services for all its descendant floating
Components.

For example, the dropdown Ext.view.BoundList of a ComboBox which is in a Window will have the
Window as its zIndexParent, and will always show above that Window, wherever the Window is placed in the z-index stack.

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.

Causes the handler to be scheduled to run at the next
animation frame event. If the
event fires again before that time, the handler is not rescheduled - the handler
will only be called once when the next animation frame is fired, with the last set
of arguments passed.

When specified as true, the function returns a destroyable object. An object
which implements the destroy method which removes all listeners added in this call.
This syntax can be a helpful shortcut to using un; particularly when
removing multiple listeners. NOTE - not compatible when using the element
option. See un for the proper syntax for removing listeners added using the
element config.

An optional numeric priority that determines the order in which event handlers
are run. Event handlers with no priority will be run as if they had a priority
of 0. Handlers with a higher priority will be prioritized to run sooner than
those with a lower priority. Negative numbers can be used to set a priority
lower than the default. Internally, the framework uses a range of 1000 or
greater, and -1000 or lesser for handlers that are intended to run before or
after all others, so it is recommended to stay within the range of -999 to 999
when setting the priority of event handlers in application-level code.
A priority must be an integer to be valid. Fractional values are reserved for
internal framework use.

This is a configuration option that you can pass along when registering a handler for
an event to assist with event delegation. 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:

The addManagedListener method is used when some object (call it "A") is listening
to an event on another observable object ("B") and you want to remove that listener
from "B" when "A" is destroyed. This is not an issue when "B" is destroyed because
all of its listeners will be removed at that time.

As you can see, when an instance of Foo is destroyed, it ensures that the 'show'
listener on the menu (MyApp.SomeGlobalSharedMenu) is also removed.

As of version 5.1 it is no longer necessary to use this method in most cases because
listeners are automatically managed if the scope object provided to addListener
is an Observable instance. However, if the observable instance and scope are not the
same object you still need to use mon or addManagedListener if you want the listener
to be managed.

Parameters

item :
Ext.util.Observable/Ext.dom.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/String(optional)

If the ename parameter was an event
name, this is the handler function or the name of a method on the specified
scope.

scope :
Object(optional)

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

options :
Object(optional)

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

Returns

:Object

Only when the destroyable option is specified.

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

Returns

Add events that will trigger the state to be saved. If the first argument is an
array, each element of that array is the name of a state event. Otherwise, each
argument passed to this method is the name of a state event.

templatetplprotectedpro

Allows addition of behavior after rendering is complete. At this stage the Component's Element
will have been styled according to the configuration, will have had any configured CSS class
names added, and will be in the configured visibility and the configured enable state.

This is a template method. a hook into the functionality of this
class. Feel free to override it in child classes.

Aligns the element with another element relative to the specified anchor points. If
the other element is the document it aligns it to the viewport. The position
parameter is optional, and can be specified in any one of the following formats:

One anchor (deprecated): The passed anchor position is used as the target
element's anchor point. The element being aligned will position its top-left
corner (tl) to that point. This method has been deprecated in favor of the newer
two anchor syntax below.

Two anchors: If two values from the table below are passed separated by a dash,
the first value is used as the element's anchor point, and the second value is
used as the target's anchor point.

In addition to the anchor points, the position parameter also supports the "?"
character. If "?" is passed at the end of the position string, the element will
attempt to align as specified, but the position will be adjusted to constrain to
the viewport if necessary. Note that the element being aligned might be swapped to
align to a different position than that specified in order to enforce the viewport
constraints. Following are all of the supported anchor positions:

Value Description
----- -----------------------------
tl The top left corner (default)
t The center of the top edge
tr The top right corner
l The center of the left edge
c In the center of the element
r The center of the right edge
bl The bottom left corner
b The center of the bottom edge
br The bottom right corner

Example Usage:

// align el to other-el using the default positioning
// ("tl-bl", non-constrained)
el.alignTo("other-el");
// align the top left corner of el with the top right corner of other-el
// (constrained to viewport)
el.alignTo("other-el", "tr?");
// align the bottom right corner of el with the center left edge of other-el
el.alignTo("other-el", "br-l?");
// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo("other-el", "c-bl", [-6, 0]);

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

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

y - The Component's page Y position in pixels

left - The Component's left value in pixels.

top - The Component's top value in pixels.

width - The Component's width value in pixels.

height - The Component's height value in pixels.

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

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

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.

templatetplprotectedpro

templatetplprotectedpro

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

This is a template method. a hook into the functionality of this
class. Feel free to override it in child classes.

chainablech

Bubbles up the component/container hierarchy, calling the specified function with each component. The scope
(this) of function call will be the scope provided or the current component. The arguments to the function will
be the args provided or the current component. If the function returns false at any point, the bubble is stopped.

Parameters

fn :
Function

The function to call

scope :
Object(optional)

The scope of the function. Defaults to current node.

args :
Array(optional)

The args to call the function with. Defaults to passing the current component.

Returns

privatepri

Ensures that all elements with "data-ref" attributes get loaded into the cache.
This really helps on IE8 where getElementById is a search not a lookup. By
populating our cache with one search of the DOM we then have random access to
the elements as we do our childEls wire up.

Returns

protectedpro

This method is used by an override to call the superclass method but bypass any
overridden method. This is often done to "patch" a method that contains a bug
but for whatever reason cannot be fixed directly.

The patch method cannot use callParent to call the superclass method since
that would call the overridden method containing the bug. In other words, the
above patch would only produce "Fixed" then "Good" in the console log, whereas,
using callParent would produce "Fixed" then "Bad" then "Good".

Parameters

args :
Array/Arguments

The arguments, either an array or the arguments object
from the current method, for example: this.callSuper(arguments)

chainablech

Returns

Retrieves the first direct child of this container which matches the passed selector or component.
The passed in selector must comply with an Ext.ComponentQuery selector, or it can be an actual Ext.Component.

Parameters

selector :
String/Ext.Component(optional)

An Ext.ComponentQuery selector. If no selector is
specified, the first child will be returned.

Returns

:

Ext.Component The matching child Ext.Component (or null if no match was found).

Returns

privatepri

Parameters

privatepri

Parameters

ptype :
String/Object

string or config object containing a ptype property.

Constructs a plugin according to the passed config object/ptype string.

Ensures that the constructed plugin always has a cmp reference back to this component.
The setting up of this is done in PluginManager. The PluginManager ensures that a reference to this
component is passed to the constructor. It also ensures that the plugin's setCmp method (if any) is called.

privatepri

privatepri

Destroys the Component. This method must not be overridden.
To add extra functionality to destruction time in a subclass, implement the
template method or {@link #onDestroy. And do not forget to
callParent() in your implementation.

Parameters

Returns

privatepri

Called from the selected frame generation template to insert this Component's inner structure inside the framing structure.

When framing is used, a selected frame generation template is used as the primary template of the #getElConfig instead
of the configured renderTpl. The renderTpl is invoked by this method which is injected into the framing template.

Parameters

privatepri

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

Parameters

Returns

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.

Parameters

privatepri

Finds an alternate Component to focus if this Component is disabled while focused, or
focused while disabled, or otherwise unable to focus.

In both cases, focus must not be lost to document.body, but must move to an intuitively
connectable Component, either a sibling, or uncle or nephew.

This is both for the convenience of keyboard users, and also for when focus is tracked
within a Component tree such as for ComboBoxes and their dropdowns.

For example, a ComboBox with a PagingToolbar in is BoundList. If the "Next Page"
button is hit, the LoadMask shows and focuses, the next page is the last page, so
the "Next Page" button is disabled. When the LoadMask hides, it attempt to focus the
last focused Component which is the disabled "Next Page" button. In this situation,
focus should move to a sibling within the PagingToolbar.

Parameters

Fires the specified event with the passed parameters and executes a function (action).
By default, the action function will be executed after any "before" event handlers
(as specified using the order option of addListener), but before any
other handlers are fired. This gives the "before" handlers an opportunity to
cancel the event by returning false, and prevent the action function from being
called.

The action can also be configured to run after normal handlers, but before any "after"
handlers (as specified using the order event option) by passing 'after'
as the order parameter. This configuration gives any event handlers except
for "after" handlers the opportunity to cancel the event and prevent the action
function from being called.

Parameters

eventName :
String

The name of the event to fire.

args :
Array

Arguments to pass to handlers and to the action function.

fn :
Function

The action function.

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)

Event options for the action function. Accepts any
of the options of addListener

order :
String(optional)

The order to call the action function relative
too the event handlers ('before' or 'after'). Note that this option is
simply used to sort the action function relative to the event handlers by "priority".
An order of 'before' is equivalent to a priority of 99.5, while an order of
'after' is equivalent to a priority of -99.5. See the priority option
of addListener for more details.

Returns

privatepri

This method fires an event on Ext.GlobalEvents allowing interested parties to know
of certain critical events for this component. This is done globally because the
(few) listeners can immediately receive the event rather than bubbling the event
only to reach the top and have no listeners.

The main usage for these events is to do with floating components. For example, the
load mask is a floating component. The component it is masking may be inside several
containers. As such, they need to know when component is hidden, either directly, or
via a parent container being hidden. To do this they subscribe to these events and
filter out the appropriate container.

This functionality is contained in Component (as opposed to Container) because a
Component can be the ownerCt for a floating component (loadmask), and the loadmask
needs to know when its owner is shown/hidden so that its hidden state can be
synchronized.

privatepri

chainablech

If this component is disabled, a close relation will be targeted for focus instead
to keep focus localized for keyboard users.

Parameters

selectText :
Mixed(optional)

If applicable, true to also select all the text in this component, or an array consisting of start and end (defaults to start) position of selection.

delay :
Boolean/Number(optional)

Delay the focus this number of milliseconds (true for 10 milliseconds).

callback :
Function(optional)

Only needed if the delay parameter is used. A function to call upon focus.

scope :
Function(optional)

Only needed if the delay parameter is used. The scope (this reference) in which to execute the callback.

Returns

:Ext.Component

The focused Component. Usually this Component. Some Containers may
delegate focus to a descendant Component (Ext.window.Windows can do this through their
defaultFocus config option. If this component is disabled, a closely
related component will be focused and that will be returned.

deprecateddep

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

Returns the [X, Y] vector by which this Positionable's element must be translated to make a best
attempt to constrain within the passed constraint. Returns false if the element
does not need to be moved.

Priority is given to constraining the top and left within the constraint.

The constraint may either be an existing element into which the element is to be
constrained, or a Ext.util.Region into which this element is to be
constrained.

By default, any extra shadow around the element is not included in the constrain calculations - the edges
of the element are used as the element bounds. To constrain the shadow within the constrain region, set the
constrainShadow property on this element to true.

Returns

privatepri

On render, reads an encoded style attribute, "filter" from the style of this Component's element.
This information is memoized based upon the CSS class name of this Component's element.
Because child Components are rendered as textual HTML as part of the topmost Container, a dummy div is inserted
into the document to receive the document element's CSS class name, and therefore style attributes.

Returns

This method returns the value of a config property that may be inherited from some
ancestor.

In some cases, a config may be explicitly set on a component with the intent of
only being presented to its children while that component should act upon the
inherited value (see referenceHolder for example). In these cases the skipThis
parameter should be specified as true.

Available since: 5.0.0

Parameters

property :
String

The name of the config property to return.

skipThis :
Boolean(optional)

Pass true if the property should be ignored if
found on this instance. In other words, true means the property must be inherited
and not explicitly set on this instance.

Returns

protectedpro

Returns the element which is masked by the mask method, or into which the LoadMask is rendered into.

The default implementation uses the maskElement configuration to access the Component's child element by name. By default, maskElement
is null which means that null is returned from this method indicating that the mask needs to be rendered into the document because
component structure should not be contaminated by mask elements.

Some subclasses may override this method if they have knowledge about external structures where a mask could usefully be rendered.

For example a Ext.view.Table will request that its owning Ext.panel.Table be masked. The
GridPanel will have its own implementation of getMaskTarget which will return the element dictated by its own maskElement
Panels use "el" as their maskElement by default, but that could be overridden to be "body" to leave toolbars and the header
mouse-accessible.

Returns

private

privatepri

Returns an offscreen div with the same class name as the element this is being rendered.
This is because child item rendering takes place in a detached div which, being not
part of the document, has no styling.

privatepri

privatepri

Returns the base type for the component. Defaults to return this.xtype, but
All derived classes of Ext.form.field.Text can return the type 'textfield',
and all derived classes of Ext.button.Button can return the type 'button'

Parameters

chainablech

Hides this Component, setting it to invisible using the configured hideMode.

Parameters

animateTarget :
String/Ext.dom.Element/Ext.Component(optional)

only valid for cfg-floating Components
such as Ext.window.Windows or Ext.tip.ToolTips, or regular Components which have
been configured with floating: true.. The target to which the Component should animate while hiding.

Defaults to: null

callback :
Function(optional)

A callback function to call after the Component is hidden.

scope :
Object(optional)

The scope (this reference) in which the callback is executed.
Defaults to this Component.

templatetplprotectedpro

The initComponent template method is an important initialization step for a Component. It is intended to be
implemented by each subclass of Ext.Component to provide any needed constructor logic. The
initComponent method of the class being created is called first, with each initComponent method
up the hierarchy to Ext.Component being called thereafter. This makes it easy to implement and,
if needed, override the constructor logic of the Component at any step in the hierarchy.

The initComponent method must contain a call to callParent in order
to ensure that the parent class' initComponent method is also called.

All config options passed to the constructor are applied to this before initComponent is called,
so you can simply access them with this.someOption.

The following example demonstrates using a dynamic string for the text of a button at the time of
instantiation of the class.

protectedpro

privatepri

Form Components which must implicitly participate in tabbing order usually have a naturally
focusable element as their focusEl, and it is the DOM event of that
receiving focus which drives the Component's onFocus handling, and the DOM event of it
being blurred which drives the onBlur handling.

Returns

privatepri

Checks if this component will be contained by the passed component as part of its
layout run. If true, then the layout on this can be skipped because it will be
encompassed when the layout for comp runs. Typical cases where this may be be false
is when asking about floaters nested in containers.

Parameters

comp :
Ext.Component

The potential owner.

Returns

protectedpro

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

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

Returns

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

Returns

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.

Returns

privatepri

Gets the Controller or Component that is used as the reference holder for this view.

Available since: 5.0.0

Parameters

skipThis :
Boolean(optional)

false to return this as the reference holder if
this instance has set referenceHolder. Unlike getInheritedConfig this method
defaults to true because it is possible that a reference property set by the
owner of a component that is also a referenceHolder itself. In this case, the
reference connects not to this component but to the parent referenceHolder.

Returns

privatepri

Returns an update method for the given Config that will call publishState
to ensure two-way bindings (via bind) as well as any publishes are updated.
This method is cached on the cfg instance for re-use.

Shorthand for addManagedListener.
The addManagedListener method is used when some object (call it "A") is listening
to an event on another observable object ("B") and you want to remove that listener
from "B" when "A" is destroyed. This is not an issue when "B" is destroyed because
all of its listeners will be removed at that time.

As you can see, when an instance of Foo is destroyed, it ensures that the 'show'
listener on the menu (MyApp.SomeGlobalSharedMenu) is also removed.

As of version 5.1 it is no longer necessary to use this method in most cases because
listeners are automatically managed if the scope object provided to addListener
is an Observable instance. However, if the observable instance and scope are not the
same object you still need to use mon or addManagedListener if you want the listener
to be managed.

Parameters

item :
Ext.util.Observable/Ext.dom.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/String(optional)

If the ename parameter was an event
name, this is the handler function or the name of a method on the specified
scope.

scope :
Object(optional)

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

options :
Object(optional)

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

Returns

:Object

Only when the destroyable option is specified.

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

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.

Causes the handler to be scheduled to run at the next
animation frame event. If the
event fires again before that time, the handler is not rescheduled - the handler
will only be called once when the next animation frame is fired, with the last set
of arguments passed.

When specified as true, the function returns a destroyable object. An object
which implements the destroy method which removes all listeners added in this call.
This syntax can be a helpful shortcut to using un; particularly when
removing multiple listeners. NOTE - not compatible when using the element
option. See un for the proper syntax for removing listeners added using the
element config.

An optional numeric priority that determines the order in which event handlers
are run. Event handlers with no priority will be run as if they had a priority
of 0. Handlers with a higher priority will be prioritized to run sooner than
those with a lower priority. Negative numbers can be used to set a priority
lower than the default. Internally, the framework uses a range of 1000 or
greater, and -1000 or lesser for handlers that are intended to run before or
after all others, so it is recommended to stay within the range of -999 to 999
when setting the priority of event handlers in application-level code.
A priority must be an integer to be valid. Fractional values are reserved for
internal framework use.

This is a configuration option that you can pass along when registering a handler for
an event to assist with event delegation. 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:

templatetplprotectedpro

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

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

Available since: 3.4.0

Parameters

container :
Ext.container.Container

Container which holds the component.

pos :
Number

Position at which the component was added.

instanced :
Boolean

false if this component was instanced by the parent
container. true if the instance already existed when it was passed to the container.

This is a template method. a hook into the functionality of this
class. Feel free to override it in child classes.

templatetplprotectedpro

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

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

Available since: 3.4.0

Parameters

destroying :
Boolean

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

This is a template method. a hook into the functionality of this
class. Feel free to override it in child classes.

privatepri

privatepri

Returns true if the passed element is within the container tree of this component.

For example if a menu's submenu contains an Ext.form.field.Date, that top level
menu owns the elements of the date picker. Using this method, you can tell if an event took place
within a certain component tree.

Parameters

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

For example if you are extending Grid, you might decide to forward some events from store.
So you can do this inside your initComponent:

this.relayEvents(this.getStore(), ['load']);

The grid instance will then have an observable 'load' event which will be passed
the parameters of the store's load event and any function fired with the grid's
load event would have access to the grid using the this keyword (unless the event
is handled by a controller's control/listen event listener in which case 'this'
will be the controller rather than the grid).

Parameters

origin :
Object

The Observable whose events this object is to relay.

events :
String[]

Array of event names to relay.

prefix :
String(optional)

A common prefix to prepend to the event names. For example:

this.relayEvents(this.getStore(), ['load', 'clear'], 'store');

Now the grid will forward 'load' and 'clear' events of store as 'storeload' and 'storeclear'.

Returns

:Object

A Destroyable object. An object which implements the destroy method which, when destroyed, removes all relayers. For example:

A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.

If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which
causes any unrendered child Components to be rendered. This is required so that you can add
multiple child components if needed while only refreshing the layout once.

When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout
manager. If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.

Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.

Parameters

container :
Ext.dom.Element/HTMLElement/String(optional)

The element this Component should be
rendered into. If it is being created from existing markup, this should be omitted.

position :
String/Number(optional)

The element ID or DOM node index within the container before
which this component will be inserted (defaults to appending to the end of the container)

Returns

protectedpro

Returns the default listener scope for a "satellite" of this component.
Used for resolving scope for observable objects that are not part of the normal
Container/Component hierarchy (for example, plugins)

privatepri

Conditionally saves a single property from this object to the given state object.
The idea is to only save state which has changed from the initial state so that
current software settings do not override future software settings. Only those
values that are user-changed state should be saved.

deprecateddep

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)

Returns

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

Parameters

x :
Number

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

Returns

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

Parameters

x :
Number/Array

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

y :
Number(optional)

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

Returns

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

chainablechdeprecateddep

Sets the overflow x/y on the content element of the component. The x/y overflow
values can be any valid CSS overflow (e.g., 'auto' or 'scroll'). By default, the
value is 'hidden'. Passing undefined will preserve the current value.

chainablech

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 :
Number/String/Object

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

A Number specifying the new width in 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 :
Number/String

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

Parameters

animateTarget :
String/Ext.dom.Element(optional)

only valid for floating Components such as Ext.window.Windows or Ext.tip.ToolTips, or regular Components which have been configured
with floating: true. The target from which the Component should animate from while opening.

Defaults to: null

callback :
Function(optional)

A callback function to call after the Component is displayed.
Only necessary if animation was specified.

scope :
Object(optional)

The scope (this reference) in which the callback is executed.
Defaults to this Component.

Returns

protectedpro

Get the reference to the class from which this object was instantiated. Note that unlike Ext.Base#self,
this.statics() is scope-independent and it always returns the class from which it was called, regardless of what
this points to during run-time