ExtReact Docs Help

Introduction

The documentation for the ExtReact product diverges somewhat from the documentation of other Sencha products. The sections below describe documentation for all products except where indicated as unique to ExtReact.

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.

ExtReact component classes list the configurable name prominently at the top of the API class doc followed by the fully-qualified class name.

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.

Member Types

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

lookupComponent ( item ) : Ext.Component
protected

Called when a raw config object is added to this container either during initialization of the items config, or when new items are added), or {@link #insert inserted.

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:

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.

Class Icons

- Indicates a framework class

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

- A component-type framework class (any class within the Ext JS framework that extends Ext.Component)

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

Member Icons

- Indicates a class member of type config

Or in the case of an ExtReact component class this indicates a member of type prop

- 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

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.

ExtReact component classes do not hoist the getter / setter methods into the prop. All methods will be described in the Methods section

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:

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:

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.

ExtReact 6.6.0


top

Ext singleton

NPM Package

@sencha/ext-react

Hierarchy

Summary

The Ext namespace (global object) encapsulates all classes, singletons, and utility methods provided by Sencha's libraries.

Most user interface Components are at a lower level of nesting in the namespace, but many common utility functions are provided as direct properties of the Ext namespace.

Also many frequently used methods from other classes are provided as shortcuts within the Ext namespace. For example Ext.getCmp aliases Ext.ComponentManager.get.

Many applications are initiated with Ext.application which is called once the DOM is ready. This ensures all scripts have been loaded, preventing dependency issues. For example:

 Ext.application({
     name: 'MyApp',

     launch: function () {
         Ext.Msg.alert(this.name, 'Ready to go!');
     }
 });

Sencha Cmd is a free tool for helping you generate and build Ext JS (and Sencha Touch) applications. See Application for more information about creating an app.

A lower-level technique that does not use the Ext.app.Application architecture is Ext.onReady.

You can also discuss concepts and issues with others on the Sencha Forums.

No members found using the current filters

configs

Optional Configs

debugConfig : Object

This object is used to enable or disable debugging for classes or namespaces. The default instance looks like this:

 Ext.debugConfig = {
     hooks: {
         '*': true
     }
 };

Typically applications will set this in their "app.json" like so:

 {
     "debug": {
         "hooks": {
             // Default for all namespaces:
             '*': true,

             // Except for Ext namespace which is disabled
             'Ext': false,

             // Except for Ext.layout namespace which is enabled
             'Ext.layout': true
         }
     }
 }

Alternatively, because this property is consumed very early in the load process of the framework, this can be set in a script tag that is defined prior to loading the framework itself.

For example, to enable debugging for the Ext.layout namespace only:

 var Ext = Ext || {};
 Ext.debugConfig = {
     hooks: {
         //...
     }
 };

For any class declared, the longest matching namespace specified determines if its debugHooks will be enabled. The default setting is specified by the '*' property.

NOTE: This option only applies to debug builds. All debugging is disabled in production builds.

manifest : String / Ext.Manifest

This object is initialized prior to loading the framework and contains settings and other information describing the application.

For applications built using Sencha Cmd, this is produced from the "app.json" file with information extracted from all of the required packages' "package.json" files. This can be set to a string when your application is using the (microloader)[#/guide/microloader]. In this case, the string of "foo" will be requested as "foo.json" and the object in that JSON file will parsed and set as this object.

Available since: 5.0.0

properties

Instance Properties

baseCSSPrefix : String

The base prefix to use for all Ext components. To configure this property, you should use the Ext.buildSettings object before the framework is loaded:

Ext.buildSettings = {
    baseCSSPrefix : 'abc-'
};

or you can change it before any components are rendered:

Ext.baseCSSPrefix = Ext.buildSettings.baseCSSPrefix = 'abc-';

This will change what CSS classes components will use and you should then recompile the SASS changing the $prefix SASS variable to match.

Defaults to:

'x-'

BLANK_IMAGE_URL : String

URL to a 1x1 transparent gif image used by Ext to create inline icons with CSS background images.

Defaults to:

'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='

emptyFn : Function

A reusable empty function.

enableGarbageCollector

true to automatically uncache orphaned Ext.Elements periodically. If set to false, the application will be required to clean up orphaned Ext.Elements and it's listeners as to not cause memory leakage.

Defaults to:

false

enableListenerCollection

True to automatically purge event listeners during garbageCollection.

Defaults to:

true

frameStartTime : Date

This indicate the start timestamp of current cycle. It is only reliable during dom-event-initiated cycles and Ext.draw.Animator initiated cycles.

identityFn : Function

A reusable identity function that simply returns its first argument.

name : String

The name of the property in the global namespace (The window in browser environments) which refers to the current instance of Ext.

This is usually "Ext", but if a sandboxed build of ExtJS is being used, this will be an alternative name.

If code is being generated for use by eval or to create a new Function, and the global instance of Ext must be referenced, this is the name that should be built into the code.

Defaults to:

'Ext'

platformTags : Object

This object contains properties that describe the current device or platform. These values can be used in platformConfig as well as responsiveConfig statements.

This object can be modified to include tags that are useful for the application. To add custom properties, it is advisable to use a sub-object. For example:

 Ext.platformTags.app = {
     mobile: true
 };

Properties

phone : Boolean

tablet : Boolean

desktop : Boolean

touch : Boolean

Indicates touch inputs are available.

safari : Boolean

chrome : Boolean

windows : Boolean

firefox : Boolean

ios : Boolean

True for iPad, iPhone and iPod.

android : Boolean

blackberry : Boolean

tizen : Boolean

privateFn : Function

A reusable empty function for use as privates members.

 Ext.define('MyClass', {
     nothing: Ext.emptyFn,

     privates: {
         privateNothing: Ext.privateFn
     }
 });

SSL_SECURE_URL : String

URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent the IE insecure content warning ('about:blank', except for IE in secure mode, which is 'javascript:""').

USE_NATIVE_JSON : Boolean

Indicates whether to use native browser parsing for JSON methods. This option is ignored if the browser does not support native JSON methods.

Note: Native JSON methods will not work with objects that have functions. Also, property names must be quoted, otherwise the data will not parse.

Defaults to:

false

methods

Instance Methods

all ( selector, [root] ) : Ext.Component[]

Same as Ext.ComponentQuery#query.

Parameters

selector :  String

The selector string to filter returned Components.

root :  Ext.container.Container (optional)

The Container within which to perform the query. If omitted, all Components within the document are included in the search.

This parameter may also be an array of Components to filter according to the selector.

Returns

:Ext.Component[]

The matched Components.

asap ( fn, [scope], [parameters] ) : Number

Schedules the specified callback function to be executed on the next turn of the event loop. Where available, this method uses the browser's setImmediate API. If not available, this method substitutes setTimeout(0). Though not a perfect replacement for setImmediate it is sufficient for many use cases.

For more details see MDN.

Parameters

fn :  Function

Callback function.

scope :  Object (optional)

The scope for the callback (this pointer).

parameters :  Mixed[] (optional)

Additional parameters to pass to fn.

Returns

:Number

A cancelation id for Ext#asapCancel.

asapCancel ( id )

Cancels a previously scheduled call to Ext#asap.

 var asapId = Ext.asap(me.method, me);
 ...

 if (nevermind) {
     Ext.apasCancel(asapId);
 }

Parameters

id :  Number

The id returned by Ext#asap.

bind ( fn, [scope], [args], [appendArgs] ) : Function

Create a new function from the provided fn, change this to the provided scope, optionally overrides arguments for the call. Defaults to the arguments passed by the caller.

Ext.bind is alias for Ext.Function.bind

NOTE: This method is deprecated. Use the standard bind method of JavaScript Function instead:

 function foo () {
     ...
 }

 var fn = foo.bind(this);

This method is unavailable natively on IE8 and IE/Quirks but Ext JS provides a "polyfill" to emulate the important features of the standard bind method. In particular, the polyfill only provides binding of "this" and optional arguments.

Parameters

fn :  Function

The function to delegate.

scope :  Object (optional)

The scope (this reference) in which the function is executed. If omitted, defaults to the default global environment object (usually the browser window).

args :  Array (optional)

Overrides arguments for the call. (Defaults to the arguments passed by the caller)

appendArgs :  Boolean/Number (optional)

if True args are appended to call args instead of overriding, if a number the args are inserted at the specified position.

Returns

:Function

The new function.

checkVersion ( specs, [matchAll] ) : Boolean

This method checks the registered package versions against the provided version specs. A spec is either a string or an object indicating a boolean operator. This method accepts either form or an array of these as the first argument. The second argument applies only when the first is an array and indicates whether all specs must match or just one.

Package Version Specifications

The string form of a spec is used to indicate a version or range of versions for a particular package. This form of spec consists of three (3) parts:

  • Package name followed by "@". If not provided, the framework is assumed.
  • Minimum version.
  • Maximum version.

At least one version number must be provided. If both minimum and maximum are provided, these must be separated by a "-".

Some examples of package version specifications:

 4.2.2           (exactly version 4.2.2 of the framework)
 4.2.2+          (version 4.2.2 or higher of the framework)
 4.2.2-          (version 4.2.2 or higher of the framework)
 4.2.1 - 4.2.3   (versions from 4.2.1 up to 4.2.3 of the framework)
 - 4.2.2         (any version up to version 4.2.1 of the framework)

 [email protected]         (exactly version 1.0 of package "foo")
 [email protected]     (versions 1.0 up to 1.3 of package "foo")

NOTE: This syntax is the same as that used in Sencha Cmd's package requirements declarations.

Boolean Operator Specifications

Instead of a string, an object can be used to describe a boolean operation to perform on one or more specs. The operator is either and or or and can contain an optional not.

For example:

 {
     not: true,  // negates boolean result
     and: [
         '4.2.2',
         '[email protected] - 2.0.1'
     ]
 }

Each element of the array can in turn be a string or object spec. In other words, the value is passed to this method (recursively) as the first argument so these two calls are equivalent:

 Ext.checkVersion({
     not: true,  // negates boolean result
     and: [
         '4.2.2',
         '[email protected] - 2.0.1'
     ]
 });

 !Ext.checkVersion([
         '4.2.2',
         '[email protected] - 2.0.1'
     ], true);

Examples

 // A specific framework version
 Ext.checkVersion('4.2.2');

 // A range of framework versions:
 Ext.checkVersion('4.2.1-4.2.3');

 // A specific version of a package:
 Ext.checkVersion('[email protected]');

 // A single spec that requires both a framework version and package
 // version range to match:
 Ext.checkVersion({
     and: [
         '4.2.2',
         '[email protected]'
     ]
 });

 // These checks can be nested:
 Ext.checkVersion({
     and: [
         '4.2.2',  // exactly version 4.2.2 of the framework *AND*
         {
             // either (or both) of these package specs:
             or: [
                 '[email protected]',
                 '[email protected]+'
             ]
         }
     ]
 });

Version Comparisons

Version comparsions are assumed to be "prefix" based. That is to say, "[email protected]" matches any version of "foo" that has a major version 1 and a minor version of 2.

This also applies to ranges. For example "[email protected]" matches all versions of "foo" from 1.2 up to 2.2 regardless of the specific patch and build.

Use in Overrides

This methods primary use is in support of conditional overrides on an Ext.define declaration.

Parameters

specs :  String/Array/Object

A version specification string, an object containing or or and with a value that is equivalent to specs or an array of either of these.

matchAll :  Boolean (optional)

Pass true to require all specs to match.

Defaults to: false

Returns

:Boolean

True if specs matches the registered package versions.

create ( [name], [args] ) : Object

Instantiate a class by either full name, alias or alternate name.

If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.

For example, all these three lines return the same result:

 // xtype
 var window = Ext.create({
     xtype: 'window',
     width: 600,
     height: 800,
     ...
 });

 // alias
 var window = Ext.create('widget.window', {
     width: 600,
     height: 800,
     ...
 });

 // alternate name
 var window = Ext.create('Ext.Window', {
     width: 600,
     height: 800,
     ...
 });

 // full class name
 var window = Ext.create('Ext.window.Window', {
     width: 600,
     height: 800,
     ...
 });

 // single object with xclass property:
 var window = Ext.create({
     xclass: 'Ext.window.Window', // any valid value for 'name' (above)
     width: 600,
     height: 800,
     ...
 });

Parameters

name :  String (optional)

The class name or alias. Can be specified as xclass property if only one object parameter is specified.

args :  Object... (optional)

Additional arguments after the name will be passed to the class' constructor.

Returns

:Object

instance

defer ( fn, millis, [scope], [args], [appendArgs] ) : Number

Calls this function after the number of milliseconds specified, optionally in a specific scope. Example usage:

var sayHi = function(name){
    alert('Hi, ' + name);
}

// executes immediately:
sayHi('Fred');

// executes after 2 seconds:
Ext.Function.defer(sayHi, 2000, this, ['Fred']);

// this syntax is sometimes useful for deferring
// execution of an anonymous function:
Ext.Function.defer(function(){
    alert('Anonymous');
}, 100);

Ext.defer is alias for Ext.Function.defer

Parameters

fn :  Function

The function to defer.

millis :  Number

The number of milliseconds for the setTimeout call (if less than or equal to 0 the function is executed immediately).

scope :  Object (optional)

The scope (this reference) in which the function is executed. If omitted, defaults to the browser window.

args :  Array (optional)

Overrides arguments for the call. Defaults to the arguments passed by the caller.

appendArgs :  Boolean/Number (optional)

If true args are appended to call args instead of overriding, or, if a number, then the args are inserted at the specified position.

Defaults to: false

Returns

:Number

The timeout id that can be used with clearTimeout.

define ( className, data, [createdFn] ) : Ext.Base

Defines a class or override. A basic class is defined like this:

 Ext.define('My.awesome.Class', {
     someProperty: 'something',

     someMethod: function(s) {
         alert(s + this.someProperty);
     }

     ...
 });

 var obj = new My.awesome.Class();

 obj.someMethod('Say '); // alerts 'Say something'

To create an anonymous class, pass null for the className:

 Ext.define(null, {
     constructor: function () {
         // ...
     }
 });

In some cases, it is helpful to create a nested scope to contain some private properties. The best way to do this is to pass a function instead of an object as the second parameter. This function will be called to produce the class body:

 Ext.define('MyApp.foo.Bar', function () {
     var id = 0;

     return {
         nextId: function () {
             return ++id;
         }
     };
 });

Note that when using override, the above syntax will not override successfully, because the passed function would need to be executed first to determine whether or not the result is an override or defining a new object. As such, an alternative syntax that immediately invokes the function can be used:

 Ext.define('MyApp.override.BaseOverride', function () {
     var counter = 0;

     return {
         override: 'Ext.Component',
         logId: function () {
             console.log(++counter, this.id);
         }
     };
 }());

When using this form of Ext.define, the function is passed a reference to its class. This can be used as an efficient way to access any static properties you may have:

 Ext.define('MyApp.foo.Bar', function (Bar) {
     return {
         statics: {
             staticMethod: function () {
                 // ...
             }
         },

         method: function () {
             return Bar.staticMethod();
         }
     };
 });

To define an override, include the override property. The content of an override is aggregated with the specified class in order to extend or modify that class. This can be as simple as setting default property values or it can extend and/or replace methods. This can also extend the statics of the class.

One use for an override is to break a large class into manageable pieces.

 // File: /src/app/Panel.js

 Ext.define('My.app.Panel', {
     extend: 'Ext.panel.Panel',
     requires: [
         'My.app.PanelPart2',
         'My.app.PanelPart3'
     ]

     constructor: function (config) {
         this.callParent(arguments); // calls Ext.panel.Panel's constructor
         //...
     },

     statics: {
         method: function () {
             return 'abc';
         }
     }
 });

 // File: /src/app/PanelPart2.js
 Ext.define('My.app.PanelPart2', {
     override: 'My.app.Panel',

     constructor: function (config) {
         this.callParent(arguments); // calls My.app.Panel's constructor
         //...
     }
 });

Another use of overrides is to provide optional parts of classes that can be independently required. In this case, the class may even be unaware of the override altogether.

 Ext.define('My.ux.CoolTip', {
     override: 'Ext.tip.ToolTip',

     constructor: function (config) {
         this.callParent(arguments); // calls Ext.tip.ToolTip's constructor
         //...
     }
 });

The above override can now be required as normal.

 Ext.define('My.app.App', {
     requires: [
         'My.ux.CoolTip'
     ]
 });

Overrides can also contain statics, inheritableStatics, or privates:

 Ext.define('My.app.BarMod', {
     override: 'Ext.foo.Bar',

     statics: {
         method: function (x) {
             return this.callParent([x * 2]); // call Ext.foo.Bar.method
         }
     }
 });

Starting in version 4.2.2, overrides can declare their compatibility based on the framework version or on versions of other packages. For details on the syntax and options for these checks, see Ext.checkVersion.

The simplest use case is to test framework version for compatibility:

 Ext.define('App.overrides.grid.Panel', {
     override: 'Ext.grid.Panel',

     compatibility: '4.2.2', // only if framework version is 4.2.2

     //...
 });

An array is treated as an OR, so if any specs match, the override is compatible.

 Ext.define('App.overrides.some.Thing', {
     override: 'Foo.some.Thing',

     compatibility: [
         '4.2.2',
         '[email protected]'
     ],

     //...
 });

To require that all specifications match, an object can be provided:

 Ext.define('App.overrides.some.Thing', {
     override: 'Foo.some.Thing',

     compatibility: {
         and: [
             '4.2.2',
             '[email protected]'
         ]
     },

     //...
 });

Because the object form is just a recursive check, these can be nested:

 Ext.define('App.overrides.some.Thing', {
     override: 'Foo.some.Thing',

     compatibility: {
         and: [
             '4.2.2',  // exactly version 4.2.2 of the framework *AND*
             {
                 // either (or both) of these package specs:
                 or: [
                     '[email protected]',
                     '[email protected]+'
                 ]
             }
         ]
     },

     //...
 });

IMPORTANT: An override is only included in a build if the class it overrides is required. Otherwise, the override, like the target class, is not included. In Sencha Cmd v4, the compatibility declaration can likewise be used to remove incompatible overrides from a build.

Parameters

className :  String

The class name to create in string dot-namespaced format, for example: 'My.very.awesome.Class', 'FeedViewer.plugin.CoolPager' It is highly recommended to follow this simple convention:

  • The root and the class name are 'CamelCased'
  • Everything else is lower-cased Pass null to create an anonymous class.

data :  Object

The key - value pairs of properties to apply to this class. Property names can be of any valid strings, except those in the reserved listed below:

createdFn :  Function (optional)

Callback to execute after the class is created, the execution scope of which (this) will be the newly created class itself.

Returns

:Ext.Base

each ( iterable, fn, [scope], [reverse] ) : Boolean

Iterates an array or an iterable value and invoke the given callback function for each item.

var countries = ['Vietnam', 'Singapore', 'United States', 'Russia'];

Ext.Array.each(countries, function(name, index, countriesItSelf) {
    console.log(name);
});

var sum = function() {
    var sum = 0;

    Ext.Array.each(arguments, function(value) {
        sum += value;
    });

    return sum;
};

sum(1, 2, 3); // returns 6

The iteration can be stopped by returning false from the callback function. Returning undefined (i.e return;) will only exit the callback function and proceed with the next iteration of the loop.

Ext.Array.each(countries, function(name, index, countriesItSelf) {
    if (name === 'Singapore') {
        return false; // break here
    }
});

Ext.each is alias for Ext.Array.each

Parameters

iterable :  Array/NodeList/Object

The value to be iterated. If this argument is not iterable, the callback function is called once.

fn :  Function

The callback function. If it returns false, the iteration stops and this method returns the current index. Returning undefined (i.e return;) will only exit the callback function and proceed with the next iteration in the loop.

item :  Object

The item at the current index in the passed array

index :  Number

The current index within the array

allItems :  Array

The array itself which was passed as the first argument

return :  Boolean

Return false to stop iteration.

scope :  Object (optional)

The scope (this reference) in which the specified function is executed.

reverse :  Boolean (optional)

Reverse the iteration order (loop from the end to the beginning).

Defaults to: false

Returns

:Boolean

See description for the fn parameter.

fireEvent ( eventName, args ) : Boolean

Shorthand for Ext.GlobalEvents#fireEvent. Fires the specified event with the passed parameters (minus the event name, plus the options object passed to addListener).

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

Available since: 6.2.0

Parameters

eventName :  String

The name of the event to fire.

args :  Object...

Variable number of parameters are passed to handlers.

Returns

:Boolean

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

first ( selector, [root] ) : Ext.Component

Returns the first match to the given component query. See Ext.ComponentQuery#query.

Parameters

selector :  String

The selector string to filter returned Component.

root :  Ext.container.Container (optional)

The Container within which to perform the query. If omitted, all Components within the document are included in the search.

This parameter may also be an array of Components to filter according to the selector.

Returns

:Ext.Component

The first matched Component or null.

fly ( dom, [named] ) : Ext.dom.Element

Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - the dom node can be overwritten by other code. Ext#fly is alias for Ext.dom.Element#fly.

Use this to make one-time references to DOM elements which are not going to be accessed again either by application code, or by Ext's classes. If accessing an element which will be processed regularly, then Ext.get will be more appropriate to take advantage of the caching provided by the Ext.dom.Element class.

If this method is called with and id or element that has already been cached by a previous call to Ext.get() it will return the cached Element instead of the flyweight instance.

Parameters

dom :  String/HTMLElement

The DOM node or id.

named :  String (optional)

Allows for creation of named reusable flyweights to prevent conflicts (e.g. internally Ext uses "_global").

Returns

:Ext.dom.Element

The shared Element object (or null if no matching element was found).

getCmp ( id ) : Ext.Component

This is shorthand reference to Ext.ComponentManager#get. Looks up an existing Ext.Component by id

Parameters

id :  String

The component id

Returns

:Ext.Component

The Component, undefined if not found, or null if a Class was found.

getStore ( store, [defaultType] ) : Ext.data.Store

Gets a registered Store by id Shortcut to Ext.data.StoreManager#lookup.

Parameters

store :  String/Object

The id of the Store, or a Store instance, or a store configuration

defaultType :  String (optional)

The store type to create when used with store configuration and there is no type specified on the config.

Returns

:Ext.data.Store

getVersion ( [packageName] ) : Ext.Version

Get the version number of the supplied package name; will return the version of the framework.

Parameters

packageName :  String (optional)

The package name, e.g., 'core', 'touch', 'ext'.

Returns

:Ext.Version

The version.

htmlDecode ( value ) : String

Convert certain characters (&, <, >, ', and ") from their HTML character equivalents.

Parameters

value :  String

The string to decode.

Returns

:String

The decoded text.

htmlEncode ( value ) : String

Convert certain characters (&, <, >, ', and ") to their HTML character equivalents for literal display in web pages.

Parameters

value :  String

The string to encode.

Returns

:String

The encoded text.

id ( [obj], [prefix] ) : String

Generates unique ids. If the element already has an id, it is unchanged

Parameters

obj :  Object/HTMLElement/Ext.dom.Element (optional)

The element to generate an id for

prefix :  String (optional)

Id prefix (defaults "ext-gen")

Returns

:String

The generated Id.

interval ( fn, millis, [scope], [args], [appendArgs] ) : Number

Calls this function repeatedly at a given interval, optionally in a specific scope.

Ext.defer is alias for Ext.Function.defer

Parameters

fn :  Function

The function to defer.

millis :  Number

The number of milliseconds for the setInterval call

scope :  Object (optional)

The scope (this reference) in which the function is executed. If omitted, defaults to the browser window.

args :  Array (optional)

Overrides arguments for the call. Defaults to the arguments passed by the caller.

appendArgs :  Boolean/Number (optional)

If true args are appended to call args instead of overriding, or, if a number, then the args are inserted at the specified position.

Defaults to: false

Returns

:Number

The interval id that can be used with clearInterval.

merge ( destination, object ) : Object

A convenient alias method for Ext.Object#merge. Merges any number of objects recursively without referencing them or their children.

var extjs = {
    companyName: 'Ext JS',
    products: ['Ext JS', 'Ext GWT', 'Ext Designer'],
    isSuperCool: true,
    office: {
        size: 2000,
        location: 'Palo Alto',
        isFun: true
    }
};

var newStuff = {
    companyName: 'Sencha Inc.',
    products: ['Ext JS', 'Ext GWT', 'Ext Designer', 'Sencha Touch', 'Sencha Animator'],
    office: {
        size: 40000,
        location: 'Redwood City'
    }
};

var sencha = Ext.Object.merge(extjs, newStuff);

// extjs and sencha then equals to
{
    companyName: 'Sencha Inc.',
    products: ['Ext JS', 'Ext GWT', 'Ext Designer', 'Sencha Touch', 'Sencha Animator'],
    isSuperCool: true,
    office: {
        size: 40000,
        location: 'Redwood City',
        isFun: true
    }
}

Parameters

destination :  Object

The object into which all subsequent objects are merged.

object :  Object...

Any number of objects to merge into the destination.

Returns

:Object

merged The destination object with all passed objects merged in.

on ( eventName, [fn], [scope], [options], [order] ) : Object

Shorthand for Ext.GlobalEvents#addListener. The on method is shorthand for addListener.

Appends an event handler to this object. For example:

myGridPanel.on("itemclick", this.onItemClick, this);

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

myGridPanel.on({
    cellclick: this.onCellClick,
    select: this.onSelect,
    viewready: this.onViewReady,
    scope: this // Important. Ensure "this" is correct during handler execution
});

One can also specify options for each event handler separately:

myGridPanel.on({
    cellclick: {fn: this.onCellClick, scope: this, single: true},
    viewready: {fn: panel.onViewReady, scope: panel}
});

Names of methods in a specified scope may also be used:

myGridPanel.on({
    cellclick: {fn: 'onCellClick', scope: this, single: true},
    viewready: {fn: 'onViewReady', scope: panel}
});

Parameters

eventName :  String/Object

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

fn :  Function/String (optional)

The method the event invokes or the name of the method within the specified scope. Will be called with arguments given to Ext.util.Observable#fireEvent plus the options parameter described below.

scope :  Object (optional)

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

options :  Object (optional)

An object containing handler configuration.

Note: The options object will also be passed as the last argument to every event handler.

This object may contain any of the following properties:

scope :  Object

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

delay :  Number

The number of milliseconds to delay the invocation of the handler after the event fires.

single :  Boolean

True to add a handler to handle just the next firing of the event, and then remove itself.

buffer :  Number

Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.

onFrame :  Number

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.

target :  Ext.util.Observable

Only call the handler if the event was fired on the target Observable, not if the event was bubbled up from a child Observable.

element :  String

This option is only valid for listeners bound to Ext.Component. The name of a Component property which references an Ext.dom.Element to add a listener to.

This option is useful during Component construction to add DOM event listeners to elements of Ext.Component which will exist only after the Component is rendered.

For example, to add a click listener to a Panel's body:

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

In order to remove listeners attached using the element, you'll need to reference the element itself as seen below.

 panel.body.un(...)

delegate :  String (optional)

A simple selector to filter the event target or look for a descendant of the target.

The "delegate" option is only available on Ext.dom.Element instances (or when attaching a listener to a Ext.dom.Element via a Component using the element option).

See the delegate example below.

capture :  Boolean (optional)

When set to true, the listener is fired in the capture phase of the event propagation sequence, instead of the default bubble phase.

The capture option is only available on Ext.dom.Element instances (or when attaching a listener to a Ext.dom.Element via a Component using the element option).

stopPropagation :  Boolean (optional)

This option is only valid for listeners bound to Ext.dom.Element. true to call stopPropagation on the event object before firing the handler.

preventDefault :  Boolean (optional)

This option is only valid for listeners bound to Ext.dom.Element. true to call preventDefault on the event object before firing the handler.

stopEvent :  Boolean (optional)

This option is only valid for listeners bound to Ext.dom.Element. true to call stopEvent on the event object before firing the handler.

args :  Array (optional)

Optional arguments to pass to the handler function. Any additional arguments passed to fireEvent will be appended to these arguments.

destroyable :  Boolean (optional)

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.

Defaults to:

false

priority :  Number (optional)

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.

order :  String (optional)

A legacy option that is provided for backward compatibility. It is recommended to use the priority option instead. Available options are:

  • 'before': equal to a priority of 100
  • 'current': equal to a priority of 0 or default priority
  • 'after': equal to a priority of -100

Defaults to:

'current'

order :  String (optional)

A shortcut for the order event option. Provided for backward compatibility. Please use the priority event option instead.

Combining Options

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

A delayed, one-time listener.

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

Attaching multiple handlers in 1 call

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

grid.on({
    itemclick: 'onItemClick',
    itemcontextmenu: grid.onItemContextmenu,
    destroy: {
        fn: function () {
            // function called within the 'altCmp' scope instead of grid
        },
        scope: altCmp // unique scope for the destroy handler
    },
    scope: grid       // default scope - provided for example clarity
});

Delegate

This is a configuration option that you can pass along when registering a handler for an event to assist with event delegation. By setting this configuration option to a simple selector, the target element will be filtered to look for a descendant of the target. For example:

var panel = Ext.create({
    xtype: 'panel',
    renderTo: document.body,
    title: 'Delegate Handler Example',
    frame: true,
    height: 220,
    width: 220,
    html: '<h1 class="myTitle">BODY TITLE</h1>Body content'
});

// The click handler will only be called when the click occurs on the
// delegate: h1.myTitle ("h1" tag with class "myTitle")
panel.on({
    click: function (e) {
        console.log(e.getTarget().innerHTML);
    },
    element: 'body',
    delegate: 'h1.myTitle'
 });

Defaults to: 'current'

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:

this.btnListeners =  = myButton.on({
    destroyable: true
    mouseover:   function() { console.log('mouseover'); },
    mouseout:    function() { console.log('mouseout'); },
    click:       function() { console.log('click'); }
});

And when those listeners need to be removed:

Ext.destroy(this.btnListeners);

or

this.btnListeners.destroy();

onReady ( fn, [scope], [options] )

Adds a listener to be notified when the document is ready (before onload and before images are loaded).

Parameters

fn :  Function

The method to call.

scope :  Object (optional)

The scope (this reference) in which the handler function executes. Defaults to the browser window.

options :  Object (optional)

An object with extra options.

delay :  Number (optional)

A number of milliseconds to delay.

Defaults to:

0

priority :  Number (optional)

Relative priority of this callback. A larger number will result in the callback being sorted before the others. Priorities 1000 or greater and -1000 or lesser are reserved for internal framework use only.

Defaults to:

0

dom :  Boolean (optional)

Pass true to only wait for DOM ready, false means full Framework and DOM readiness. numbers are reserved.

Defaults to:

false

pass ( fn, args, [scope] ) : Function

Create a new function from the provided fn, the arguments of which are pre-set to args. New arguments passed to the newly created callback when it's invoked are appended after the pre-set ones. This is especially useful when creating callbacks.

For example:

var originalFunction = function(){
    alert(Ext.Array.from(arguments).join(' '));
};

var callback = Ext.Function.pass(originalFunction, ['Hello', 'World']);

callback(); // alerts 'Hello World'
callback('by Me'); // alerts 'Hello World by Me'

Ext.pass is alias for Ext.Function.pass

Parameters

fn :  Function

The original function.

args :  Array

The arguments to pass to new callback.

scope :  Object (optional)

The scope (this reference) in which the function is executed.

Returns

:Function

The new callback function.

query ( selector, [asDom] ) : HTMLElement[]/Ext.dom.Element[]

Shorthand for Ext.dom.Element.query

Selects child nodes based on the passed CSS selector. Delegates to document.querySelectorAll. More information can be found at http://www.w3.org/TR/css3-selectors/

All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example div.foo:nth-child(odd)[@foo=bar].bar:first would be a perfectly valid selector.

Element Selectors:

  • * any element
  • E an element with the tag E
  • E F All descendant elements of E that have the tag F
  • E > F or E/F all direct children elements of E that have the tag F
  • E + F all elements with the tag F that are immediately preceded by an element with the tag E
  • E ~ F all elements with the tag F that are preceded by a sibling element with the tag E

Attribute Selectors:

The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.

  • E[foo] has an attribute "foo"
  • E[foo=bar] has an attribute "foo" that equals "bar"
  • E[foo^=bar] has an attribute "foo" that starts with "bar"
  • E[foo$=bar] has an attribute "foo" that ends with "bar"
  • E[foo*=bar] has an attribute "foo" that contains the substring "bar"
  • E[foo%=2] has an attribute "foo" that is evenly divisible by 2
  • E[foo!=bar] has an attribute "foo" that does not equal "bar"

Pseudo Classes:

  • E:first-child E is the first child of its parent
  • E:last-child E is the last child of its parent
  • E:nth-child(n) E is the nth child of its parent (1 based as per the spec)
  • E:nth-child(odd) E is an odd child of its parent
  • E:nth-child(even) E is an even child of its parent
  • E:only-child E is the only child of its parent
  • E:checked E is an element that is has a checked attribute that is true (e.g. a radio or checkbox)
  • E:first the first E in the resultset
  • E:last the last E in the resultset
  • E:nth(n) the nth E in the resultset (1 based)
  • E:odd shortcut for :nth-child(odd)
  • E:even shortcut for :nth-child(even)
  • E:not(S) an E element that does not match simple selector S
  • E:has(S) an E element that has a descendant that matches simple selector S
  • E:next(S) an E element whose next sibling matches simple selector S
  • E:prev(S) an E element whose previous sibling matches simple selector S
  • E:any(S1|S2|S2) an E element which matches any of the simple selectors S1, S2 or S3//\

CSS Value Selectors:

  • E{display=none} CSS value "display" that equals "none"
  • E{display^=none} CSS value "display" that starts with "none"
  • E{display$=none} CSS value "display" that ends with "none"
  • E{display*=none} CSS value "display" that contains the substring "none"
  • E{display%=2} CSS value "display" that is evenly divisible by 2
  • E{display!=none} CSS value "display" that does not equal "none"

Parameters

selector :  String

The CSS selector.

asDom :  Boolean (optional)

false to return an array of Ext.dom.Element

Defaults to: true

Returns

:HTMLElement[]/Ext.dom.Element[]

An Array of elements ( HTMLElement or Ext.dom.Element if asDom is false) that match the selector. If there are no matches, an empty Array is returned.

raise ( err )

Raise an error that can include additional data and supports automatic console logging if available. You can pass a string error message or an object with the msg attribute which will be used as the error message. The object can contain any other name-value attributes (or objects) to be logged along with the error.

Note that after displaying the error message a JavaScript error will ultimately be thrown so that execution will halt.

Example usage:

Ext.raise('A simple string error message');

// or...

Ext.define('Ext.Foo', {
    doSomething: function(option){
        if (someCondition === false) {
            Ext.raise({
                msg: 'You cannot do that!',
                option: option,   // whatever was passed into the method
                code: 100 // other arbitrary info
            });
        }
    }
});

Parameters

err :  String/Object

The error message string, or an object containing the attribute "msg" that will be used as the error message. Any other data included in the object will also be logged to the browser console, if available.

regStore ( id, config )

Creates a new store for the given id and config, then registers it with the Ext.data.StoreManager. Sample usage:

Ext.regStore('AllUsers', {
    model: 'User'
});

// the store can now easily be used throughout the application
new Ext.List({
    store: 'AllUsers',
    ... other config
});

Parameters

id :  String/Object

The id to set on the new store, or the config object that contains the storeId property.

config :  Object

The store config if the first parameter (id) is just the id.

require ( expressions, [fn], [scope] )

Loads all classes by the given names and all their direct dependencies; optionally executes the given callback function when finishes, within the optional scope.

Parameters

expressions :  String/String[]

The class, classes or wildcards to load.

fn :  Function (optional)

The callback function.

scope :  Object (optional)

The execution scope (this) of the callback function.

select ( selector, composite ) : Ext.dom.CompositeElementLite/Ext.dom.CompositeElement

Shorthand for Ext.dom.Element.select

Selects descendant elements of this element based on the passed CSS selector to enable Ext.dom.Element methods to be applied to many related elements in one statement through the returned Ext.dom.CompositeElementLite object.

Parameters

selector :  String/HTMLElement[]

The CSS selector or an array of elements

composite :  Boolean

Return a CompositeElement as opposed to a CompositeElementLite. Defaults to false.

Returns

:Ext.dom.CompositeElementLite/Ext.dom.CompositeElement

setVersion ( packageName, version ) : Ext

Set version number for the given package name.

Parameters

packageName :  String

The package name, e.g. 'core', 'touch', 'ext'.

version :  String/Ext.Version

The version, e.g. '1.2.3alpha', '2.4.0-dev'.

Returns

:Ext

syncRequire ( expressions, [fn], [scope] )

Synchronously loads all classes by the given names and all their direct dependencies; optionally executes the given callback function when finishes, within the optional scope.

Parameters

expressions :  String/String[]

The class, classes or wildcards to load.

fn :  Function (optional)

The callback function.

scope :  Object (optional)

The execution scope (this) of the callback function.

toArray ( iterable, [start], [end] ) : Array

Converts any iterable (numeric indices and a length property) into a true array.

function test() {
    var args = Ext.Array.toArray(arguments),
        fromSecondToLastArgs = Ext.Array.toArray(arguments, 1);

    alert(args.join(' '));
    alert(fromSecondToLastArgs.join(' '));
}

test('just', 'testing', 'here'); // alerts 'just testing here';
                                 // alerts 'testing here';

Ext.Array.toArray(document.getElementsByTagName('div')); // will convert the NodeList into an array
Ext.Array.toArray('splitted'); // returns ['s', 'p', 'l', 'i', 't', 't', 'e', 'd']
Ext.Array.toArray('splitted', 0, 3); // returns ['s', 'p', 'l']

Ext.toArray is alias for Ext.Array.toArray

Parameters

iterable :  Object

the iterable object to be turned into a true Array.

start :  Number (optional)

a zero-based index that specifies the start of extraction.

Defaults to: 0

end :  Number (optional)

a 1-based index that specifies the end of extraction.

Defaults to: -1

Returns

:Array

un ( eventName, fn, [scope] )

Shorthand for Ext.GlobalEvents#removeListener. Removes an event handler.

Parameters

eventName :  String

The type of event the handler was associated with.

fn :  Function

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

scope :  Object (optional)

The scope originally specified for the handler. It must be the same as the scope argument specified in the original call to Ext.util.Observable#addListener or the listener will not be removed.

Convenience Syntax

You can use the addListener destroyable: true config option in place of calling un(). For example:

var listeners = cmp.on({
    scope: cmp,
    afterrender: cmp.onAfterrender,
    beforehide: cmp.onBeforeHide,
    destroyable: true
});

// Remove listeners
listeners.destroy();
// or
cmp.un(
    scope: cmp,
    afterrender: cmp.onAfterrender,
    beforehide: cmp.onBeforeHide
);

Exception - DOM event handlers using the element config option

You must go directly through the element to detach an event handler attached using the addListener element option.

panel.on({
    element: 'body',
    click: 'onBodyCLick'
});

panel.body.un({
    click: 'onBodyCLick'
});

urlAppend ( url, string ) : String

Appends content to the query string of a URL, handling logic for whether to place a question mark or ampersand.

Parameters

url :  String

The URL to append to.

string :  String

The content to append to the URL.

Returns

:String

The resulting URL

widget ( [name], [config] ) : Object

Convenient shorthand to create a widget by its xtype or a config object.

 var button = Ext.widget('button'); // Equivalent to Ext.create('widget.button');

 var panel = Ext.widget('panel', { // Equivalent to Ext.create('widget.panel')
     title: 'Panel'
 });

 var grid = Ext.widget({
     xtype: 'grid',
     ...
 });

If a Ext.Component instance is passed, it is simply returned.

Parameters

name :  String (optional)

The xtype of the widget to create.

config :  Object (optional)

The configuration object for the widget constructor.

Returns

:Object

The widget instance

Static Methods

override ( members ) : Ext.Base
static sta

Override members of this class. Overridden methods can be invoked via Ext.Base#callParent.

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                          // alerts "I'm a cat!"
                          // alerts "Meeeeoooowwww"

Direct use of this method should be rare. Use Ext.define instead:

Ext.define('My.CatOverride', {
    override: 'My.Cat',
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

The above accomplishes the same result but can be managed by the Ext.Loader which can properly order the override and its target class and the build process can determine whether the override is needed based on the required state of the target class (My.Cat).

Parameters

members :  Object

The properties to add to this class. This should be specified as an object literal containing one or more properties.

Returns

:Ext.Base

this class

ExtReact 6.6.0