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.

An Action, or more conveniently, the name of an action prefixed with '@'
may be used as a config object for creating child components which use a handler
config property to reference a Controller method to invoke when the component is
clicked.

The property name is the action name, which may then be used as a child item
configuration in an items configuration in
any descendant component such as a toolbar or a menu, or in a
tools configuration of a Panel.

The property value is a configuration object for any clickable component.

Returns

Parameters

bindablebind

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

Parameters

This value is what tells the layout how an item should be anchored to the container. items
added to an AnchorLayout accept an anchoring-specific config property of anchor
which is a string containing two values: the horizontal anchor value and the vertical anchor
value (for example, '100% 50%'). The following types of anchor values are supported:

Percentage : Any value between 1 and 100, expressed as a percentage.

The first anchor is the percentage width that the item should take up within the container,
and the second is the percentage height. For example:

true to animate the transition when the panel is collapsed, false to skip the animation
(defaults to true if the Ext.fx.Anim class is available, otherwise false).
May also be specified as the animation duration in milliseconds.

Load actions can use paramOrder or paramsAsHash to customize how the load
method is invoked. Submit actions will always use a standard form submit. The formHandler
configuration (see Ext.direct.RemotingProvider#action) must be set on the associated
server-side method which has been imported by Ext.direct.Manager.

ARIA label for this Component. It is best to use
ariaLabelledBy option instead, because screen readers prefer
aria-labelledby attribute to aria-label. ariaLabel and
ariaLabelledBy config options are mutually exclusive.

DOM selector for a child element that is to be used
as label for this Component, set in aria-labelledby attribute.
If the selector is by id, the label element can be any existing element,
not necessarily a child of the main Component element.

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.

bindablebind

Custom CSS styles to be applied to the panel's body element, which can be supplied
as a valid CSS style string, an object containing style property name/value pairs
or a function that returns such a string or object.
For example, these two formats are interpreted to be equivalent:

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.

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.

When not a direct child item of a Ext.layout.container.Border,
then the Panel's header remains visible, and the body is collapsed to zero dimensions.
If the Panel has no header, then a new header (orientated correctly depending on the
collapseDirection) will be inserted to show a the title and a re-expand tool.

True to make the panel collapsible and have an expand/collapse toggle Tool added
into the header tool button area. False to keep the panel sized either statically,
or by an owning layout manager, with no toggle Tool.
When a panel is used in a Ext.layout.container.Border, the
floatable option can influence the behavior of collapsing.
See collapseMode and collapseDirection

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.

bindablebind

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.

privatepri

Parameters

True to constrain the panel within its containing element, false to allow it to fall outside
of its containing element. By default floating components such as Windows will be rendered to
document.body. To render and constrain the window within another element specify
renderTo. Optionally the header only can be constrained using
constrainHeader.

True to constrain the panel header within its containing element (allowing the panel body
to fall outside of its containing element) or false to allow the header to fall outside
its containing element.
Optionally the entire panel can be constrained using constrain.

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.

Name of the element that will be the target of
defaultButton keydown listener. The default element is Panel body, which
means that pressing Enter key while focus is on docked items will not fire defaultButton
action.

If you want defaultButton action to fire in docked items, set this config to "el".

This object holds the default weights applied to dockedItems that have no weight.
These start with a weight of 1, to allow negative weights to insert before top items
and are odd numbers so that even weights can be used to get between different dock orders.

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.

Returns

Parameters

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

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

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

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

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

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)

Parameters

dock :
Object

The dock position.

Returns

A component or series of components to be added as docked items to this panel. The docked
items can be docked to either the top, right, left or bottom of a panel. This is typically
used for things like toolbars or tab bars:

An Ext.data.reader.Reader (e.g. Ext.data.reader.Xml) instance or
configuration to be used to read field error messages returned from 'submit' actions.
This is optional as there is built-in support for processing JSON responses.

The Records which provide messages for the invalid Fields must use the
Field name (or id) as the Record ID, and must contain a field called 'msg'
which contains the error message.

The errorReader does not have to be a full-blown implementation of a
Reader. It simply needs to implement a read(xhr) function
which returns an Array of Records in an object with the following
structure:

If specified, the properties in this object are used as default config values for each
Ext.form.Labelable instance (e.g. Ext.form.field.Base or
Ext.form.FieldContainer) that is added as a descendant of this container.
Corresponding values specified in an individual field's own configuration, or from the
defaults config of its parent container,
will take precedence. See the documentation for Ext.form.Labelable to see
what config options may be specified in the fieldDefaults.

In this example, field1 and field2 will get labelAlign: 'top' (from the fieldset's defaults)
and labelWidth: 100 (from fieldDefaults), field3 and field4 will both get labelAlign: 'left'
(from fieldDefaults and field3 will use the labelWidth: 150 from its own config.

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

Parameters

true to allow clicking a collapsed Panel's placeholder to display the Panel floated
above the layout, false to force the user to fully expand a collapsed region by clicking
the expand button to see it again.

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.

bindablebind

A numeric unicode character code to use as the icon. The default font-family
for glyphs can be set globally using
glyphFontFamily application
config or the Ext.setGlyphFontFamily() method.
It is initially set to 'Pictos'.

The following shows how to set the glyph using the font icons provided in the
SDK (assuming the font-family has been configured globally):

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.

bindablebind

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.

Parameters

html :
String/Object

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

loadScripts :
Boolean(optional)

Only legitimate when using the html
configuration. Causes embedded script tags to be executed. Inline source will be executed
with this Component as the scope (this reference).

Defaults to: false

callback :
Function(optional)

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

scriptScope :
Object(optional)

The scope (this reference) in which to
execute inline script elements content. Scripts with a src attribute cannot
be executed with this scope.

Returns

Parameters

bindablebind

One or more space separated CSS classes to be applied to the icon element.
The CSS rule(s) applied should specify a background image to be used as the
icon.

An example of specifying a custom icon class would be something like:

// specify the property in the config for the class:
iconCls: 'my-home-icon'
// css rule specifying the background image to be used as the icon image:
.my-home-icon {
background-image: url(../images/my-home-icon.gif) !important;
}

In addition to specifying your own classes, you can use the font icons
provided in the SDK using the following syntax:

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.

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.

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

Notes:

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

If set to true, the field values are sent as JSON in the request body.
All of the field values, plus any additional params configured via baseParams
and/or the options to submit, will be included in the values POSTed in the body
of the request.

bindablebind

An object containing handlers for keyboard events. The property names of this
object are the key name and any modifiers. The values of the properties are the
descriptors of how to handle each event.

The handler descriptor can be simply the handler function(either the
literal function or the method name), or it can be an object with these
properties:

handler: The function or its name to call to handle the event.

scope: The this pointer context (can be "this" or "controller").

event: An optional override of the key event to which to listen.

Important: Calls to setKeyMap do not replace the entire keyMap but
instead update the provided mappings. That is, unless null is passed as the
value of the keyMap which will clear the keyMap of all entries.

Defaults to:

null

Properties

scope : String

The default scope to apply to key handlers
which do not specify a scope. This is processed the same way as the scope of
cfg-listeners. It defaults to the "controller", but using 'this'
means that an instance method will be used.

Returns

Parameters

bindablebind

Enables or disables processing keys in the keyMap. This value starts as
null and if it is null when initKeyMap is called, it will automatically
be set to true. Since initKeyMap is called by Ext.Component at the
proper time, this is not something application code normally handles.

Returns

NOTE: this method cannot be used to change the "type" of layout after the component
has been rendered to the DOM. After rendering, this method can only modify the
existing layout's configuration properties. The reason for this restriction is that
many container layouts insert special wrapping elements into the dom, and the
framework does not currently support dynamically changing these elements once
rendered.

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

For panels that are collapsed to the left or right,
Ext.panel.Header#titlePosition may be temporarily changed for UI consistency.
Setting this config to true will force the specified titlePosition to be maintained

When true, the dock component layout writes
height information to the panel's DOM elements based on its shrink wrap height
calculation. This ensures that the browser respects the calculated height.
When false, the dock component layout will not write heights on the panel or its
body element. In some simple layout cases, not writing the heights to the DOM may
be desired because this allows the browser to respond to direct DOM manipulations
(like animations).

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

Minimum width of all footer toolbar buttons in pixels. If set, this will be used
as the default value for the Ext.button.Button#minWidth config of each Button
added to the footer toolbar via the fbar or buttons configurations.
It will be ignored for buttons that have a minWidth configured some other way,
e.g. in their own config object or via the defaults
of their parent container.

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.

True to overlap the header in a panel over the framing of the panel itself. This is needed
when frame: true (and is done automatically for you). Otherwise it is undefined.
If you manually add rounded corners to a panel header which does not have frame: true,
this will need to be set to true.

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

A list of params to be executed server side. Only used for the apiload
configuration.

Specify the params in the order in which they must be executed on the
server-side as either (1) an Array of String values, or (2) a String of params
delimited by either whitespace, comma, or pipe. For example,
any of the following would be acceptable:

This config describes one or more plugin config objects used to create plugin
instances for this component.

Plugins are a way to bundle and reuse custom functionality. Plugins should extend
Ext.plugin.Abstract but technically the only requirement for a valid plugin
is that it contain an init method that accepts a reference to its owner. Once
a plugin is created, the owner will call the init method, passing a reference
to itself. Each plugin can then call methods or respond to events on its owner
as needed to provide its functionality.

privatepri

If set to true, sets up an interval task (using the pollInterval) in which the
panel's fields are repeatedly checked for changes in their values. This is in addition
to the normal detection each field does on its own input element, and is not needed
in most cases. It does, however, provide a means to absolutely guarantee detection
of all changes including some edge cases in some browsers which do not fire native events.
Defaults to false.

deprecateddep

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:

An Ext.data.reader.Reader (e.g. Ext.data.reader.Xml) instance or
configuration to be used to read data when executing 'load' actions. This
is optional as there is built-in support for processing JSON responses.

If true, this container will be marked as being a point in the hierarchy where
references to items with a specified reference config will be held. The container
will automatically become a referenceHolder if a controller is specified.

renderConfig wraps configs that do not get applied until after the component is
rendered. Unlike normal config system properties, renderConfigs use a special
setter method to store values on the instance instead of running the apply and
update methods if it is called before the component is rendered. Then, after the
component has been rendered, these values are processed by the normal apply and
update method for the config.

This means that calling the get method for the config prior to render will return
whatever raw value has been set, while calling the getter after render will return
the value after processing by the config's apply method. If this distinction needs
to be made, it is the caller's responsibility to check for the rendered state and
handle such intermediate config values.

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:

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 classes with complex DOM structures 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.

Panels (subclasses and instances)

By default, when a panel is configured to shrink wrap in a given dimension, only
the panel's "content" (items and html content inside the panel body) contributes
to its size, and the content of docked items is ignored. Optionally you can use
the shrinkWrapDock config to allow docked items to contribute to the
panel's size as well. For example, if shrinkWrap and shrinkWrapDock are both set
to true, the width of the panel would be the width of the panel's content and the
panel's header text.

Allows for this panel to include the dockedItems when trying to determine
the overall size of the panel. This option is only applicable when this panel is
also shrink wrapping in the same dimensions. See Ext.Panel#shrinkWrap for
an explanation of the configuration options.

When cfg-draggable is true, Specify this as true to cause the draggable
config to work the same as it does in Ext.window.Window. This Panel
just becomes movable. No DragDrop instances receive any notifications.
For example:

If set to true, a standard HTML form submit is used instead of a XHR (Ajax) style form
submission. All of the field values, plus any additional params configured via
baseParams and/or the options to submit, will be included in the values
submitted in the form.

An array of events that, when fired, should trigger this object to
save its state. stateEvents defaults to the stateEvents associated with the
component you are using. Any events you statically set will be appended to that list.
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.
By default the following stateEvents are added:

bindablebind

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.

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.

You can perform extra processing on state save and restore by attaching
handlers to the beforestaterestore, staterestore,
beforestatesave and statesave events. In some simple cases,
passing an object for the stateful config may suffice. If an object is
provided, the properties of that object are used to include or exclude stateful
properties returned by getState. For example:

Returns

Parameters

true to allow expanding and collapsing the panel (when collapsible = true)
by clicking anywhere in the header bar, false) to allow it only by clicking to tool
button). When a panel is used in a Ext.layout.container.Border,
the floatable option can influence the behavior of collapsing.

An array of Ext.panel.Tool configs/instances to be added to the header tool area.
The tools are stored as child components of the header container. They can be accessed using
down and {#query}, as well as the other component methods. The toggle tool
is automatically created if collapsible is set to true.

Note that, apart from the toggle tool which is provided when a panel is collapsible,
these tools only provide the visual button. Any required functionality must be provided
by adding handlers that implement the necessary behavior.

bindablebind

Emulates the behavior of the CSS
touch-action
property in a cross-browser compatible manner.

Keys in this object are touch action names, and values are false to disable
a touch action or true to enable it. Accepted keys are:

panX

panY

pinchZoom

doubleTapZoom

All touch actions are enabled (true) by default, so it is usually only necessary
to specify which touch actions to disable. For example, the following disables
only horizontal scrolling and pinch-to-zoom on the component's main element:

touchAction: {
panX: false,
pinchZoom: false
}

Touch actions can be specified on child elements using the child element name,
for example:

The primary motivation for setting the touch-action of an element is to prevent
the browser's default handling of a gesture such as pinch-to-zoom, or
drag-to-scroll, so that the application can implement its own handling of that
gesture on the element. Suppose, for example, a component has a custom drag
handler on its element and wishes to prevent horizontal scrolling of its container
while it is being dragged:

Returns

Parameters

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.

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.

privatepri

A prototype-chained object storing transform method names and priorities stored
on the class prototype. On first instantiation, this object is converted into
an array that is sorted by priority and stored on the constructor.

privatepri

We don't want the base destructor to clear the prototype because
our destroyObservable handler must be called the very last. It will take care
of the prototype after completing Observable destruction sequence.

privatepri

Setting this property to true will result in setting the object's
prototype to null after the destruction sequence is fully completed.
After that, most attempts at calling methods on the object instance
will result in "method not defined" exception. This can be very helpful
with tracking down otherwise hard to find bugs like runaway Ajax requests,
timed functions not cleared on destruction, etc.

Note that this option can only work in browsers that support Object.setPrototypeOf
method, and is only available in debugging mode.

privatepri

privatepri

Values to decide which side of the body element docked items must go
This overides any weight. A left/top will always sort before a right/bottom
regardless of any weight value. Weights sort at either side of the "body" dividing point.

readonlyro

true for keyboard interactive Components or Widgets, false otherwise.
For Containers, this property reflects interactiveness of the
Container itself, not its children. See isFocusable.

Note: It is not enough to set this property to true to make
a component keyboard interactive. You also need to make sure that
the component's focusEl is reachable via Tab key (tabbable).
See also tabIndex.

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:

readonlyro

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:

privatepri

privatepri

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 that are added to a
Container, the ZIndexManager is acquired from the first ancestor Container found
that is floating. If no floating ancestor is found, the global
Ext.WindowManager is used.

readonlyro

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

For Ext.Component#cfg-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.

Optional set of arguments to pass to the handler function before the actual
fired event arguments. For example, if args is set to ['foo', 42],
the event handler function will be called with an arguments list like this:

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.

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.

Parameters

templatetplprotectedpro

Allows additional behavior after rendering is complete. At this stage, the
Ext.ComponentElement 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 configured enable
state.

Note: If the Component has a ViewController
and the controller has an afterRender
method it will be called passing the Component as the single param.

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

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.

The following property may be set on the animation config root:

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.

protectedpro

Parameters

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.

templatetplprotectedpro

privatepri

Called before the change from default, configured state into the collapsed state.
This method may be called at render time to enable rendering in an initially collapsed state,
or at runtime when an existing, fully laid out Panel may be collapsed.
It basically saves configs which need to be clobbered for the duration of the collapsed
state.

privatepri

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 method-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)

protectedpro

chainablech

Cascades down the component/container heirarchy from this component (passed in
the first call), calling the specified function with each component. The scope
(this reference) of the 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 cascade is stopped on
that branch.

Available since: 2.3.0

Parameters

fn :
Function

The function to call

scope :
Object(optional)

The scope of the function(defaults to current component)

origArgs :
Array(optional)

The args to call the function with. The current component
always passed as the last argument.

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.

privatepri

Clips this Component/Element to fit within the passed element's or component's view area

Parameters

clippingEl :
Ext.Component/Ext.dom.Element/Ext.util.Region

The Component or element
or Region which should clip this element even if this element is outside the bounds
of that region.

sides :
Number

The sides to clip 1=top, 2=right, 4=bottom, 8=left.

This is to support components being clipped to their logical owner, such as a grid row
editor when the row being edited scrolls out of sight. The editor should be clipped
at the edge of the scrolling element.

Returns

Closes the Panel. By default, this method, removes it from the DOM,
destroys the Panel object and all its descendant
Components. The beforeclose event is fired before the
close happens and will cancel the close action if it returns false.

chainablech

Collapses the panel body so that the body becomes hidden. Docked Components parallel
to the border towards which the collapse takes place will remain visible. Fires the
beforecollapse event which will cancel the collapse action if it returns false.

Returns

privatepri

Parameters

privatepri

Parameters

plugin :
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.

chainablech

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

privatepri

Perform the actual destruction sequence.

As a rule of thumb, subclasses should destroy their child Components and/or other objects
before calling parent method. Any object references will be nulled after this method
has finished, to prevent the possibility of memory leaks.

chainablech

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.

Returns

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
connectible 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

deprecateddep

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

Fires the specified event with the passed parameters and executes a function (action).
Evented Actions will automatically dispatch a 'before' event passing. This event will
be given a special controller that allows for pausing/resuming of the event flow.

By pausing the controller the updater and events will not run until resumed. Pausing,
however, will not stop the processing of any other before events.

Parameters

eventName :
String

The name of the event to fire.

args :
Array

Arguments to pass to handlers and to the action function.

fn :
Function/String

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.

fnArgs :
Array/Boolean(optional)

Optional arguments for the action fn. If not
given, the normal args will be used to call fn. If false is passed, the
args are used but if the first argument is this instance it will be removed
from the args passed to the action function.

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

Parameters

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.

Attempts a default component lookup (see Ext.container.Container#getComponent).
If the component is not found in the normal items, the dockedItems are searched
and the matched component (if any) returned (see getDockedComponent).
Note that docked items will only be matched by component id or itemId -- if you pass
a numeric index only non-docked child components will be searched.

Returns

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

protectedpro

Returns the focus holder element associated with this Container.
By default, this is the Container's target element; however if defaultFocus
is defined, the child component referenced by that property will be found
and returned instead.

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 an object holding the descendants of this container keyed by their
name. This object should not be held past the scope of the function calling this
method. It will not be valid if items are added or removed from this or any
sub-container.

The intended usage is shown here (assume there are 3 components with names of
"foo", "bar" and "baz" at some level below this container):

Note: See also findPlugin. Prior to 6.2.0 the plugin had to have a
pluginId property but this can now be just
id. Both are supported (so plugins with a
matching pluginId are still found) but id is preferred.

protectedpro

This may be overriden by Components which have ownership of Components
that are not contained in the property-items collection.

NOTE: IMPORTANT note for maintainers:
Items are returned in tree traversal order. Each item is appended to the result array
followed by the results of that child's getRefItems call.
Floating child items are appended after internal child items.

Returns an object holding the descendants of this view keyed by their
reference. This object should not be held
past the scope of the function calling this method. It will not be valid if items
are added or removed from this or any sub-container.

The intended usage is shown here (assume there are 3 components with reference
values of "foo", "bar" and "baz" at some level below this container):

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'

Convenience function for fetching the current value of each field in the form.
This is the same as calling this.getForm().getValues().
Retrieves the fields in the form as a set of key/value pairs, using their
getSubmitData() method to collect the values.
If multiple fields return values under the same name those values will be combined
into an Array. This is similar to getFieldValues
except that this method collects only String values for submission, while getFieldValues
collects type-specific data values (e.g. Date objects for date fields.)

Parameters

asString :
Boolean

If true, will return the key/value collection as a single
URL-encoded param string.