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.

The code above produces a simple grid with three columns. We specified a Store which will
load JSON data inline. In most apps we would be placing the grid inside another container
and wouldn't need to provide the height, width and
cfg-fullscreen options but they are included here to for demonstration.

The grid we created above will contain a header bar with a title ('Simpsons'), a row of
column headers directly underneath and finally the grid rows under the headers.

Columns

By default, each Ext.grid.column.Column is sortable and toggles between
ascending and descending sorting when you click on its header. There are several basic
configs that can be applied to columns to change these behaviors. For example:

We turned off sorting on the 'Name' column so clicking its header now has no effect. We
also made the Email column hidden by default (it can be shown again by using the
Ext.grid.plugin.ViewOptions plugin). See the
Ext.grid.column.Column for more details.

A top-level column definition may contain a columns configuration. This means that the
resulting header will be a group header, and will contain the child columns.

Renderers and Templates

These column configs are processed by the default cell type
for a column. These configs have some downsides compared to data binding but are provided
for compatibility with previous releases.

Renderers and templates must update the cell content when any field changes. They
cannot assume that only changes to the dataIndex will affect the rendering. Using
data binding, only the configs affected by the changed data will be updated.

Updates are processed synchronously in response to the record update notification.
Contrast to ViewModels which provide a buffered update mechanism.

Constructing HTML blocks in code (even in a template) is a common cause of security
problems such as XSS attacks.

Sorting & Filtering

Every grid is attached to a Ext.data.Store, which provides multi-sort and
filtering capabilities. It's easy to set up a grid to be sorted from the start:

Sorting at run time is easily accomplished by simply clicking each column header. If you
need to perform sorting on more than one field at run time it's easy to do so by adding
new sorters to the store:

configs

bindablebindrequiredreq

An array of column definition objects which define all columns that appear in this grid.
Each column definition provides the header text for the column, and a definition of where
the data for that column comes from.

This can also be a configuration object for a {Ext.grid.header.Container HeaderContainer}
which may override certain default configurations if necessary. For example, the special
layout may be overridden to use a simpler layout, or one can set default values shared
by all columns:

Returns

Parameters

bindablebindrequiredreq

Can be either a Store instance or a configuration object that will be turned
into a Store. The Store is used to populate the set of items that will be
rendered in the DataView. See the DataView intro documentation for more
information about the relationship between Store and DataView.

bindablebind

The item from the cfg-items
collection that will be active first. This is usually only meaningful in a
Ext.layout.Card, where only one item can be active at a time. If
passed a string, it will be assumed to be a Ext.ComponentQuery selector. A number
will reference an index or a Ext.Component instance may be passed as
well. An object config will be created as a new component.

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.

bindablebind

Set this config to false to limit rendering data to just the record's data
or to an object to describe the desired associated data. This data is used to
satisfy the itemTpl. The default of true will gather all associated data
that is currently loaded. This can be expensive. If only a small amount of the
available data is needed, this config can speed up the rendering process.

For example, if an OrderItem needs the Item data but not its parent Order,
this config can be set like so:

associatedData: {
item: true
}

Given the above, only the item association (to the Item record) will be
gathered into the render data.

Applications that experience performance issues in the affected versions of
Safari may need to turn off autoSizing globally for all Ext.Container instances
by placing the following override in the application's "overrides" directory:

To illustrate, the following example should render a 200px by 200px green box
(the container) with a yellow box inside of it (the child item). The child
item's height and width are both set to '50%' so the child should render
exactly 100px by 100px in size.

All browsers except for Safari render the previous example correctly, but
Safari does not assign a height to the component. To make percentage-sized
items work in Safari, simply set autoSize to false on the container.

Since the underlying implementation works by absolutely positioning the container's
body element, this option can only be used when the container is not
"shrink wrapping" the content in either direction. When autoSize is
set to false, shrink wrapped dimension(s) will collapse to 0.

Returns

Parameters

bindablebind

Enables or disables bordering on this component.
The following values are accepted:

null or `true (default): Do nothing and allow the border to be specified
by the theme.

false: suppress the default border provided by the theme.

Please note that enabling bordering via this config will not add a border-color
or border-style CSS property to the component; you provide the border-color
and border-style via CSS rule or style configuration
(if not already provide by the theme).

Returns

Parameters

bindablebind

The absolute bottom position of this Component; must be a valid CSS length value,
e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component
become 'positioned', which means it will no longer participate in the layout of the
Container that it resides in.

Returns

Parameters

bindablebind

The number of items an infinite list will render beyond those immediately
visible.

To prevent the rendering of items while scrolling, these extra items are
rendered out of view. When the scroller approaches within minimumBufferSize
of the end of the rendered range, the extra items trailing the scroll will be
repositioned (and reconfigured) ahead of the scroll.

removedrem

bindablebind

Configure this as true to have this Component centered within its Container.
Setting this value to true will make this Component become 'positioned', which means
it will no longer participate in the layout of the Container that it resides in.

Returns

Parameters

bindablebind

The CSS class to add to this widget's element, in
addition to the baseCls. In many cases, this property will be specified
by the derived widget class. See userCls for adding additional CSS
classes to widget instances (such as items in a Ext.Container).

Parameters

bindablebind

This object configures group collapse. It is only applicable when grouped.
Set to false to disable group collapsibility. The default value of true
uses the collapseDefaults config for the final collapser configuration
object. If this config is an object, it is merged with collapseDefaults
giving this object's properties priority over the defaults.

Parameters

bindablebind

The configured element will automatically be added as the content of this
component. When you pass a string, we expect it to be an element id. If the
content element is hidden, we will automatically show it.

Returns

Parameters

bindablebind

Enables you to easily control Components inside this Container by
listening to their events and taking some action. For example, if we had a container with
a nested Disable button, and we wanted to hide the Container when the Disable button is
tapped, we could do this:

We used a Ext.ComponentQuery selector to listen to the tap
event on any Ext.Button anywhere inside the Container that has the
text 'Disable'. Whenever a Component matching that selector
fires the tap event our hideMe function is called. hideMe is called with scope:
this (e.g. this is the Container instance).

Returns

Parameters

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

bindablebind

A set of default configurations to apply to all child Components
in this Container. It's often useful to specify defaults when creating more than one
items with similar configurations. For example here we can specify that each child is a
panel and avoid repeating the xtype declaration for each one:

Returns

Parameters

bindablebind

As a Ext.Container, this config controls the default type of
items that are added.

Non-data items can also be added to this container, and these will pick up this
default. This config will only apply to data items if itemConfig does not contain
an xtype property (which it does by default). This means that data items will
not be affected by this config unless an itemConfig is set that nulls out the
xtype (not recommended).

bindablebind

When supplied as a string or number this option supports the same syntax
as CSS flex.
For example:

flex: '1 2 auto'

sets flex-grow property to 0, flex-shrink to 2 and flex-basis to
'auto'.

The default flex-shrink value for box layout items is set to 0 in the
stylesheet, which is different from the browser's default flex-shrink value
of 1. This accommodates the majority use case for applications since where
non-flexed components are typically not expected to shrink smaller than their
default size.

For convenience when only a single number is supplied it is used as the value
for both flex-grow and flex-shrink, for example flex: 3 is the same as
flex: '3 3'

An object form is also accepted:

flex: {
grow: 1,
shrink: 2,
basis: 'auto'
}

When the object form is supplied shrink always defaults to 0 regardless
of the value of grow.

Although 'auto' is the default value for flex-basis, flex-basis defaults to 0%
when flex is supplied as a single numeric or string value (e.g. flex: 1). If
this behavior is not desired either explicitly set flex-basis to 'auto' or use
the object form to set only grow and/or shrink:

Returns

Parameters

bindablebind

A Component may be floated above all other components in the application. This means that
the component is absolutely positioned, and will move to the front and occlude other
sibling floated component if clicked.

A Floated component may have floated descendants. It will bring these decendants to the
front with it when brought to the front of its sibling floated components.

By default, descendant floated components are all positioned using the viewport
coordinate system. To make a floating component a positioning parent for descendants,
and have the ancestors positioned relatively, configure the parent floated component
with cfg-relative: true.

Parameters

bindablebind

The height of this Component; must be a valid CSS length value, e.g: 300, 100px,
30%, etc. By default, if this is not explicitly set, this Component's element will
simply have its own natural size. If set to auto, it will set the width to null
meaning it will have its own natural size.

Returns

Parameters

bindablebind

Animation effect to apply when the Component is being hidden. Typically you want to use
an outbound animation type such as 'fadeOut' or 'slideOut'. For more animations, check
the Ext.fx.Animation#type config.

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

Parameters

bindablebind

Set to true to if this list should anticipate too many rows to render to the
DOM at one time. When set to true, only a fixed number of rows is rendered at
once, depending on the height or maxHeight of the list.

When using this mode in an auto-height situation (where the list should be
the height of its items), a maxHeight setting is required. This is due to
the fact that the rendered items are absolutely positioned. As such they do not
directly contribute to the list's height.

When maxHeight is set, however, an infinite list uses that setting to decide
how many items to render and will set an appropriate height on its innermost
element, thereby allowing the list to achieve the proper height.

Note that this configuration can not be dynamically changed after the list has
instantiated.

Returns

Parameters

bindablebind

When set to true the items within the DataView will have their display set to
inline-block and be arranged horizontally. By default the items will wrap to
the width of the DataView. Passing an object with { wrap: false } will turn
off this wrapping behavior and overflowed items will need to be scrolled to
horizontally.

Returns

Parameters

bindablebind

A string to add to the immediate parent element of the inner items of this
container. That is, items that are not docked, positioned or floated. In
some containers, positioned items may be in this same element.

Returns

Parameters

bindablebind

True to cause items to act like buttons for interaction styling.
in ButtonMode items will maintain pressed state whenever pressed down.
they will not remove this state for tap distance cancellation or mouse out.

Returns

Parameters

bindablebind

This object allows you to map Ext.data.Model fields to specific
configs on component items.

The itemDataMap object's keys describe the target objects to receive data
from the associated record. These keys are either '#'
(for the item itself) or a reference to
a component contained in the item.

For each target listed in itemDataMap, the value is another map describing
the config name (in the key) and the data field name (as the value).

Returns

Parameters

bindablebind

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

Returns

Parameters

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

Parameters

bindablebind

The absolute left position of this Component; must be a valid CSS length value,
e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component
become 'positioned', which means it will no longer participate in the layout of the
Container that it resides in.

Returns

Parameters

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 DataView'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.

Parameters

bindablebind

If specified, gives an explicit height for a floated data view
when it is showing the loadingText, if that is specified. This is
useful to prevent the view's height from collapsing to zero when the loading
mask is applied and there are no other contents in the data view.

Returns

Parameters

bindablebind

A string to display during data load operations. This text will be displayed
in a loading div and the view's contents will be cleared while loading,
otherwise the view's contents will continue to display normally until the new
data is loaded and the contents are replaced.

Note: For virtual stores, the load mask will be shown frequently as the user
scrolls. To inhibit that, set loadingText to the empty string.

Returns

Parameters

bindablebind

true to mark items as dirty when the underlying record has been modified.

By default there is no special styling for dirty items in data views and
Ext.dataview.List. When this config is set to true each item's
element will have a CSS class name of x-mark-dirty added to it. When the
underlying record for an item has been modified the item will have the x-dirty
CSS class.

Returns

Parameters

bindablebind

A configuration to allow you to mask this container.

If the value is a string, it will be used as the message config for an
Ext.LoadMask.

For more precise control over the mask, you can optionally pass an object block with
and xtype of loadmask, and an optional message value to display a loading mask.
Please refer to the Ext.LoadMask component to see other configurations.

Parameters

bindablebind

The maximum height of this Component; must be a valid CSS length value,
e.g: 300, 100px, 30%, etc. If set to auto, it will set the width to null
meaning it will have its own natural size. Note that this config will not apply if the
Component is 'positioned' (absolutely positioned or centered)

Returns

Parameters

bindablebind

The maximum width of this Component; must be a valid CSS length value,
e.g: 300, 100px, 30%, etc. If set to auto, it will set the width to null
meaning it will have its own natural size. Note that this config will not apply if the
Component is 'positioned' (absolutely positioned or centered)

Returns

Parameters

bindablebind

true to make this Component modal. This will create a mask underneath the
Component that covers its parent and does not allow the user to interact with
any other Components until this Component is dismissed.

Returns

Parameters

This config enables binding to your Ext.data.Model#validators. This
is only processed by form fields (e.g., Ext.field.*) at present, however, this
setting is inherited and so can be set on a parent container.

When set to true by a component (or by an ancestor container), the validators
of for any {@Ext.data.Model record} fields will be used wherever the value is
bound to such data fields.

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:

bindablebind

Configure as true to have columns retain their sorted state after other
columns have been clicked upon to sort.

As subsequent columns are clicked upon, they become the new primary sort key.

Clicking on an already sorted column which is not the primary sort key does
not toggle its direction. Analogous to bringing a window to the top by
clicking it, this makes that column's field the primary sort key. Subsequent
clicks then toggle it.

Clicking on a primary key column toggles ASC -> DESC -> no sorter.

The column sorting menu items may be used to toggle the direction without
affecting the sorter priority.

bindablebind

Set to true to display a disclosure icon on each list item. The list will
then fire the disclose event, and the event can be stopped before childtap.
By setting this config to a function, the function passed will be called when
the disclosure is tapped. This can be either a function object or the name of
a Ext.app.ViewController method.

Finally you can specify an object with a scope and handler property defined.
This will also be bound to the tap event listener and is useful when you want
to change the scope of the handler.

Parameters

bindablebind

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.

The object keys are the id's as well as the default type alias. This form
allows the value of the plugins to be merged from base class to derived class
and finally with the instance configuration. This allows classes to define a
set of plugins that derived classes or instantiators can further configure or
disable. This merge behavior is a feature of the
config.

The plugins config can also be an array of plugin aliases (arrays are not
merged so this form does not respect plugins defined by the class author):

Parameters

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:

Returns

Parameters

bindablebind

A model instance which updates the Component's html based on it's tpl. Similar
to the data configuration, but tied to to a record to make allow dynamic
updates. This must be a model instance and not a configuration of one.

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.

bindablebind

The absolute right position of this Component; must be a valid CSS length value,
e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component
become 'positioned', which means it will no longer participate in the layout of the
Container that it resides in.

Returns

Parameters

bindablebind

Animation effect to apply when the Component is being shown. Typically you want to use
an inbound animation type such as 'fadeIn' or 'slideIn'. For more animations, check the
Ext.fx.Animation#type config.

Returns

Parameters

bindablebind

The absolute top position of this Component; must be a valid CSS length value,
e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component
become 'positioned', which means it will no longer participate in the layout of the
Container that it resides in.

Returns

Parameters

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 reference elements using the reference 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:

By default, the user cannot click+drag+select text/elements of the UI. Applications may
want to enable user selection for specific DOM elements, such as the bodyElement of
a component used as a tab panel. The tab and tab text would not be user selectable in
this example, but the content area when the tab is selected would.

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.

bindablebind

The width of this Component; must be a valid CSS length value, e.g: 300, 100px,
30%, etc. By default, if this is not explicitly set, this Component's element will
simply have its own natural size. If set to auto, it will set the width to null
meaning it will have its own natural size.

Returns

Parameters

The xtype configuration option can be used to optimize Component creation and rendering.
It serves as a shortcut to the full component name. For example, the component
Ext.button.Button has an xtype of button.

Any Component can be created implicitly as an object config with an xtype specified,
allowing it to be declared and passed into the rendering pipeline without actually being
instantiated as an object. Not only is rendering deferred, but the actual creation of the
object itself is also deferred, saving memory and resources until they are actually needed.
In complex, nested layouts containing many Components, this can make a noticeable
improvement in performance.

In the first example, the button will always be created immediately during the panel's
initialization. With many added Components, this approach could potentially slow the
rendering of the page. In the second example, the button will not be created or rendered
until the panel is actually displayed in the browser. If the panel is never displayed
(for example, if it is a tab that remains hidden) then the button will never be created and
will never consume any resources whatsoever.

Parameters

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.

A CSS class to apply to the main element that will be inherited down the class
hierarchy. Subclasses may override this property on their prototype to add their
own CSS class in addition to the CSS classes inherited from ancestor classes via
the prototype chain. For example

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.

readonlyroprivatepri

The array of data items. This array is maintained in store order. The type of
objects in this array depend on the type of this dataview. Further, infinite
lists only put the actually rendered portion of the store in this array.

NOTE: This is not the same thing as the items maintained by this Container
since there could be items in the container that are not associated to any
record in the store.

readonlyroprivatepri

protectedpro

A configuration object for Ext.Element.create() that is used to create the Element
template. Subclasses should avoid overriding this property and instead add elements
using template.

Supports all the standard options of a Ext.Element.create() config and adds 3
additional options:

reference - this option specifies a name for Element references. These
references names become properties of the Widget instance and refer to Ext.Element
instances that were created using the template:

Since listeners cannot be attached without an Ext.Element reference the reference
property MUST be specified in order to use listeners.

The Widget instance is used as the scope for all listeners specified in this way,
so it is invalid to use the scope option in the listeners config since it will
always be overwritten using this.

uiCls - a suffix to be appended to the ui-specific CSS class for each ui
for this widget. These ui classes are constructed by appending the ui to each
classCls or baseCls for the widget. As such, uiCls should
never be used on the main element reference, as its uiCls is computed automatically.

For example, assume a widget is defined with a ui of 'alt action' and a
uiCls of 'inner-el' on its innerElement reference element:

These additional classes can be used to style the reference element for a particular
ui; however, use of uiCls is not typically necessary or recommended. Reference
elements should usually be styled using simple descendant selectors:

.x-doodad-alt .x-inner-el {
color: red;
}

When there is a possibility that widgets can be nested it is best to use direct
child selectors to avoid the possibility of selecting all descendants instead
of just the reference element for the intended widget:

.x-doodad-alt > .x-inner-el {
color: red;
}

Only use uiCls when there is a possibility of nesting, AND there may be a variable
number of elements between the main element and the reference element in question.
For example, Ext.Container with docked items has a different number of elements
in between its element and its bodyElement than a Container without docked items
because of the wrapping elements that are dynamically added to support docking.
To ensure it does not style all descendants it must use a uiCls to style its
bodyElement:

.x-container-alt-body-el {
background: #fff;
}

Note that when uiCls is specified it also adds a class name that does not contain
the ui using just the classCls and/or baseCls as the prefix. This class name
can be used for base-level styling that does not relate to any particular UI:

readonlyroprivatepri

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

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:

Set to true on widgets that should inherit ui from their parent container.
This property is typically set on the class body, but can be set on an instance as long
as it is set prior to the instance being added to its container. This property is
inspected at the moment a widget is added to a container, and any UIs on the container
are added to the widget at that time. Inherited UIs are in addition to the widget's
own ui, and are updated when the container's UI changes.

readonlyroprivatepri

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

privatepri

A map that tracks all reference elements configured with a uiCls.
Contains the element reference by default since the element always gets
non-suffixed ui-specific CSS class names added to it (see syncUiCls)

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:

privatepri

privatepri

templatetpl

This method is called after the component is initially added to the DOM. If this
component Ext.Container other components, the afterRender method
for child components is called before the parent's afterRender.

Implementations of this method should avoid reading from the DOM but are free to
write to the DOM as needed. To read the DOM, consider implementing
onRender instead.

This method is not generally needed because components always have their own DOM
element and these are maintained by config property
updaters prior to insertion in the DOM. In general, it is always best to manipulate
the component's elements outside the DOM where there is no associated reflow or
layout cost. This method is useful for situations where the component's elements
must be in the DOM in order to be manipulated correctly.

Available since: 6.5.0

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

privatepri

Parameters

Animates to the supplied activeItem with a specified animation. Currently this only works
with a Card layout. This passed animation will override any default animations on the
container, for a single card switch. The animation will be destroyed when complete.

privatepri

privatepri

Bubbles up the getRefOwner hierarchy, 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 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

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)

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.

Parameters

Returns

Destroys the Widget. This method should not be overridden in custom Widgets,
because it sets the flags and does final cleanup that must go last. Instead,
override doDestroy method to add functionality at destruction time.

privatepri

Parameters

Perform the actual destruction sequence. This is the method to override in your
subclasses to add steps specific to the destruction of custom Component.

If the Component is currently added to a Container it will first be removed
from that Container. All Ext.Element references are also deleted and
the Component is de-registered from Ext.ComponentManager.

As a rule of thumb, subclasses should destroy their child Components, Elements,
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.

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

The method finds this floated component's floatParent. That means a DOM positioning
container which acts as a root element for sibling floated components, and allows allows
floated components to be absolutely positioned, and their encapsulating elements to be
reordered to produce a visual stacking effect.

This component's element is appended to its floatParent.

There is a global floatParent element, created on demand when the first top level
floated component is shown. This may be an item child of a container configured with
cfg-floated: true, or a free floated component which is programatically
shown.

Child items of components inside a floated component may also be configured floated.
These are give a floatParent which is created on demand wrapping the nearest floated
ancestor. This means that when that ancestor's element is brought to the top of the
stack (by moving its element to the end of its own floatParent), the descendant elements
will automatically remain above.

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

Returns

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.