Docs Help

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.

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

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

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.

Ext JS 6.2.0 - Classic Toolkit


top

Ext singleton

Hierarchy

Ext

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

Defaults to:

Ext.debugConfig || manifest.debug || {
    hooks: {
        '*': true
    }
}

manifest : String / Object

This object is initialized prior to loading the framework (Ext JS or Sencha Touch) 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.

Defaults to:

manifest

Available since: 5.0.0

Properties

compatibility : String/Object

An object keyed by package name with the value being to desired compatibility level as a version number. If this is just a string, this version is assumed to apply to the framework ('ext' or 'touch'). Setting this value to less than 5 for 'ext' will enable the compatibility layer to assist in the application upgrade process. For details on the upgrade process, see the (Upgrade Guide)[#/guides/upgrade_50].

debug : Object

An object configuring the debugging characteristics of the framework. See Ext.debugConfig which is set to this value.

packages : Object

An object keyed by package name with the value being a subset of the package's "package.json" descriptor.

properties

Instance Properties

$eventNameMap : Object
private pri

A map of event names which contained the lower-cased versions of any mixed case event names.

Defaults to:

{}

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=='

cache : Object
readonly ro private pri

Stores Fly instances keyed by their assigned or generated name.

Defaults to:

flyweights

Available since: 5.0.0

chromeVersion : Number
readonly ro

The current version of Chrome (0 if the browser is not Chrome).

compatVersions
private pri

Defaults to:

{}

draw
private pri

Defaults to:

{}

emptyFn : Function

A reusable empty function.

Defaults to:

emptyFn

emptyString

A zero length string which will pass a truth test. Useful for passing to methods which use a truth test to reject falsy values where a string value must be cleared.

Defaults to:

new String()

enableAria : Boolean

This property is provided for backward compatibility with previous versions of Ext JS. Accessibility is always enabled in Ext JS 6.0+.

This property is deprecated. To disable WAI-ARIA compatibility warnings, override Ext.ariaWarn function in your application startup code:

 Ext.application({
     launch: function() {
         Ext.ariaWarn = Ext.emptyFn;
     }
 });

For stricter compatibility with WAI-ARIA requirements, replace Ext.ariaWarn with a function that will raise an error instead:

 Ext.application({
     launch: function() {
         Ext.ariaWarn = function(target, msg) {
             Ext.raise({
                 msg: msg,
                 component: target
             });
         };
     }
 });

Defaults to:

true

Available since: 6.0.0

enableFx : Boolean

True if the Ext.fx.Anim Class is available.

Defaults to:

true

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

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:

true

enableListenerCollection

True to automatically purge event listeners during garbageCollection.

Defaults to:

true

enumerables : String[]

An array containing extra enumerables for old browsers

Defaults to:

enumerables

firefoxVersion : Number
readonly ro

The current version of Firefox (0 if the browser is not Firefox).

frameStartTime

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

Defaults to:

Ext.now()

functionFactoryCache
private pri

Defaults to:

{}

identityFn : Function

A reusable identity function that simply returns its first argument.

Defaults to:

identityFn

idPrefix
private pri

Defaults to:

'ext-'

idSeed
private pri

Defaults to:

0

ieVersion : Number
readonly ro

The current version of IE (0 if the browser is not IE). This does not account for the documentMode of the current page, which is factored into isIE8, and isIE9. Thus this is not always true:

Ext.isIE8 == (Ext.ieVersion == 8)

isChrome : Boolean
readonly ro

True if the detected browser is Chrome.

isDomReady : Boolean
readonly ro

true when the document body is ready for use.

isEdge : Boolean
readonly ro

True if the detected browser is Edge.

isGecko : Boolean
readonly ro

True if the detected browser uses the Gecko layout engine (e.g. Mozilla, Firefox).

isIE : Boolean
readonly ro

True if the detected browser is Internet Explorer.

isIE10 : Boolean
readonly ro

True if the detected browser is Internet Explorer 10.x.

isIE10m : Boolean
readonly ro

True if the detected browser is Internet Explorer 10.x or lower.

isIE10p : Boolean
readonly ro

True if the detected browser is Internet Explorer 10.x or higher.

isIE11 : Boolean
readonly ro

True if the detected browser is Internet Explorer 11.x.

isIE11m : Boolean
readonly ro

True if the detected browser is Internet Explorer 11.x or lower.

isIE11p : Boolean
readonly ro

True if the detected browser is Internet Explorer 11.x or higher.

isIE8 : Boolean
readonly ro

True if the detected browser is Internet Explorer 8.x.

isIE8m : Boolean
readonly ro

True if the detected browser is Internet Explorer 8.x or lower.

isIE8p : Boolean
readonly ro

True if the detected browser is Internet Explorer 8.x or higher.

isIE9 : Boolean
readonly ro

True if the detected browser is Internet Explorer 9.x.

isIE9m : Boolean
readonly ro

True if the detected browser is Internet Explorer 9.x or lower.

isIE9p : Boolean
readonly ro

True if the detected browser is Internet Explorer 9.x or higher.

isLinux : Boolean
readonly ro

True if the detected platform is Linux.

isMac : Boolean
readonly ro

True if the detected platform is Mac OS.

isOpera : Boolean
readonly ro

True if the detected browser is Opera.

isReady : Boolean
readonly ro

true when isDomReady is true and the Framework is ready for use.

isSafari : Boolean
readonly ro

True if the detected browser is Safari.

isSecure : Boolean
readonly ro

True if the page is running over SSL

Defaults to:

/^https/i.test(window.location.protocol)

isStrict : Boolean

true if browser is using strict mode.

Defaults to:

document.compatMode === "CSS1Compat"

isWebKit : Boolean
readonly ro

True if the detected browser uses WebKit.

isWindows : Boolean
readonly ro

True if the detected platform is Windows.

lastRegisteredVersion
private pri

Defaults to:

null

Logger
private pri

Defaults to:

{
    //<feature logger>
    log: function(message, priority) {
        if (message && global.console) {
            if (!priority || !(priority in global.console)) {
                priority = 'log';
            }
            message = '[' + priority.toUpperCase() + '] ' + message;
            global.console[priority](message);
        }
    },
    verbose: function(message) {
        this.log(message, 'verbose');
    },
    info: function(message) {
        this.log(message, 'info');
    },
    warn: function(message) {
        this.log(message, 'warn');
    },
    error: function(message) {
        throw new Error(message);
    },
    deprecate: function(message) {
        this.log(message, 'warn');
    }
} || {
    //</feature>
    verbose: emptyFn,
    log: emptyFn,
    info: emptyFn,
    warn: emptyFn,
    error: function(message) {
        throw new Error(message);
    },
    deprecate: emptyFn
}

manifest : String / Object

Defaults to:

Ext.manifest || "bootstrap"

mergeIf
private pri

Defaults to:

Ext.Object.mergeIf

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'

operaVersion : Number
readonly ro

The current version of Opera (0 if the browser is not Opera).

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
     }
 });

Defaults to:

privateFn

rootInheritedState : Object
private pri

The top level inheritedState to which all other inheritedStates are chained. If there is a Viewport instance, this object becomes the Viewport's inheritedState. See also Ext.Component#getInherited.

Defaults to:

{}

Available since: 5.0.0

safariVersion : Number
readonly ro

The current version of Safari (0 if the browser is not Safari).

scopeCss : Boolean

Set this to true before onReady to prevent any styling from being added to the body element. By default a few styles such as font-family, and color are added to the body element via a "x-body" class. When this is set to true the "x-body" class is not added to the body element, but is added to the elements of root-level containers instead.

splitAndUnescape
private pri

Defaults to:

(function() {
    var cache = {};
    return function(origin, delimiter) {
        if (!origin) {
            return [];
        } else if (!delimiter) {
            return [
                origin
            ];
        }
        var replaceRe = cache[delimiter] || (cache[delimiter] = new RegExp('\\\\' + delimiter, 'g')),
            result = [],
            parts, part;
        parts = origin.split(delimiter);
        while ((part = parts.shift()) !== undefined) {
            // If any of the parts ends with the delimiter that means
            // the delimiter was escaped and the split was invalid. Roll back.
            while (part.charAt(part.length - 1) === '\\' && parts.length > 0) {
                part = part + delimiter + parts.shift();
            }
            // Now that we have split the parts, unescape the delimiter char
            part = part.replace(replaceRe, delimiter);
            result.push(part);
        }
        return result;
    };
})()

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:""').

Defaults to:

Ext.isSecure && Ext.isIE ? 'javascript:\'\'' : 'about:blank'

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

useShims : Boolean

Set to true to use a shim on all floating Components and Ext.LoadMask

Defaults to:

false

validIdRe : RegExp
private pri

Regular expression used for validating identifiers.

Defaults to:

/^[a-z_][a-z0-9\-_]*$/i

versions
private pri

Object containing version information for all packages utilized by your application.

For a public getter, please see Ext.getVersion().

Defaults to:

{}

webKitVersion : Number
readonly ro

The current version of WebKit (0 if the browser does not use WebKit).

Static Properties

cache
static sta private pri

Defaults to:

{}

methods

Instance Methods

addBehaviors ( obj )

Applies event listeners to elements by selectors when the document is ready. The event name is specified with an @ suffix.

Ext.addBehaviors({
    // add a listener for click on all anchors in element with id foo
    '#foo a@click': function(e, t){
        // do something
    },

    // add the same listener to multiple selectors (separated by comma BEFORE the @)
    '#foo a, #bar span.some-class@mouseover': function(){
        // do something
    }
});

Parameters

obj :  Object

The list of behaviors to apply

addRootNamespaces ( namespaces )
private pri

This function registers top-level (root) namespaces. This is needed for "sandbox" builds.

 Ext.addRootNamespaces({
     MyApp: MyApp,
     Common: Common
 });

In the above example, MyApp and Common are top-level namespaces that happen to also be included in the sandbox closure. Something like this:

 (function(Ext) {

 Ext.sandboxName = 'Ext6';
 Ext.isSandboxed = true;
 Ext.buildSettings = { baseCSSPrefix: "x6-", scopeResetCSS: true };

 var MyApp = MyApp || {};
 Ext.addRootNamespaces({ MyApp: MyApp );

 ... normal app.js goes here ...

 })(this.Ext6 || (this.Ext6 = {}));

The sandbox wrapper around the normally built app.js content has to take care of introducing top-level namespaces as well as call this method.

Available since: 6.0.0

Parameters

namespaces :  Object

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.

application ( config )

Loads Ext.app.Application class and starts it up with given configuration after the page is ready.

See Ext.app.Application for details.

Parameters

config :  Object/String

Application config object or name of a class derived from Ext.app.Application.

apply ( object, config, [defaults] ) : Object

Copies all the properties of config to the specified object. There are two levels of defaulting supported:

 Ext.apply(obj, { a: 1 }, { a: 2 });
 //obj.a === 1

 Ext.apply(obj, {  }, { a: 2 });
 //obj.a === 2

Note that if recursive merging and cloning without referencing the original objects or arrays is needed, use Ext.Object#merge instead.

Parameters

object :  Object

The receiver of the properties.

config :  Object

The primary source of the properties.

defaults :  Object (optional)

An object that will also be applied for default values.

Returns

:Object

returns object.

applyIf ( object, config ) : Object

Copies all the properties of config to object if they don't already exist.

Parameters

object :  Object

The receiver of the properties

config :  Object

The source of the properties

Returns

:Object

returns obj

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.

batchLayouts ( fn, [scope] )

Utility wrapper that suspends layouts of all components for the duration of a given function.

Parameters

fn :  Function

The function to execute.

scope :  Object (optional)

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

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.

callback ( callback, [scope], [args], [delay], [caller], [defaultScope] ) :

Execute a callback function in a particular scope. If callback argument is a function reference, that is called. If it is a string, the string is assumed to be the name of a method on the given scope. If no function is passed the call is ignored.

For example, these calls are equivalent:

 var myFunc = this.myFunc;

 Ext.callback('myFunc', this, [arg1, arg2]);
 Ext.callback(myFunc, this, [arg1, arg2]);

 Ext.isFunction(myFunc) && this.myFunc(arg1, arg2);

Parameters

callback :  Function/String

The callback function to execute or the name of the callback method on the provided scope.

scope :  Object (optional)

The scope in which callback should be invoked. If callback is a string this object provides the method by that name. If this is null then the caller is used to resolve the scope to a ViewController or the proper defaultListenerScope.

args :  Array (optional)

The arguments to pass to the function.

delay :  Number (optional)

Pass a number to delay the call by a number of milliseconds.

caller :  Object (optional)

The object calling the callback. This is used to resolve named methods when no explicit scope is provided.

defaultScope :  Object (optional)

The default scope to return if none is found.

Defaults to: caller

Returns

:

The value returned by the callback or undefined (if there is a delay or if the callback is not a function).

canonicalEventName ( name )
private pri

Parameters

name :  Object

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.

clean ( array ) : Array
deprecated dep

Old alias to Ext.Array#clean Filter through an array and remove empty item as defined in Ext.isEmpty.

See Ext.Array#filter

Parameters

array :  Array

Returns

:Array

results

Deprecated since version 4.0.0
Use Ext.Array#clean instead

clone ( item, [cloneDom] ) : Object

Clone simple variables including array, {}-like objects, DOM nodes and Date without keeping the old reference. A reference for the object itself is returned if it's not a direct descendant of Object. For model cloning, see Model.copy.

Parameters

item :  Object

The variable to clone

cloneDom :  Boolean (optional)

true to clone DOM nodes.

Defaults to: true

Returns

:Object

clone

coerce ( from, to ) :

Coerces the first value if possible so that it is comparable to the second value.

Coercion only works between the basic atomic data types String, Boolean, Number, Date, null and undefined.

Numbers and numeric strings are coerced to Dates using the value as the millisecond era value.

Strings are coerced to Dates by parsing using the defaultFormat.

For example

Ext.coerce('false', true);

returns the boolean value false because the second parameter is of type Boolean.

Parameters

from :  Mixed

The value to coerce

to :  Mixed

The value it must be compared against

Returns

:

The coerced value.

copy ( dest, source, names, [usePrototypeKeys] ) : Object

Copies a set of named properties fom the source object to the destination object.

Example:

var foo = { a: 1, b: 2, c: 3 };

var bar = Ext.copy({}, foo, 'a,c');
// bar = { a: 1, c: 3 };

Important note: To borrow class prototype methods, use Ext.Base#borrow instead.

Parameters

dest :  Object

The destination object.

source :  Object

The source object.

names :  String/String[]

Either an Array of property names, or a comma-delimited list of property names to copy.

usePrototypeKeys :  Boolean (optional)

Pass true to copy keys off of the prototype as well as the instance.

Defaults to: false

Returns

:Object

The dest object.

copyIf ( destination, source, names ) : Object

Copies a set of named properties fom the source object to the destination object if the destination object does not already have them.

Example:

var foo = { a: 1, b: 2, c: 3 };

var bar = Ext.copyIf({ a:42 }, foo, 'a,c');
// bar = { a: 42, c: 3 };

Parameters

destination :  Object

The destination object.

source :  Object

The source object.

names :  String/String[]

Either an Array of property names, or a single string with a list of property names separated by ",", ";" or spaces.

Returns

:Object

The dest object.

copyTo ( dest, source, names, [usePrototypeKeys] ) : Object
deprecated dep

Copies a set of named properties fom the source object to the destination object.

Example:

var foo = { a: 1, b: 2, c: 3 };

var bar = Ext.copyTo({}, foo, 'a,c');
// bar = { a: 1, c: 3 };

Important note: To borrow class prototype methods, use Ext.Base#borrow instead.

Parameters

dest :  Object

The destination object.

source :  Object

The source object.

names :  String/String[]

Either an Array of property names, or a comma-delimited list of property names to copy.

usePrototypeKeys :  Boolean (optional)

Pass true to copy keys off of the prototype as well as the instance.

Defaults to: false

Returns

:Object

The dest object.

Deprecated since version 6.0.1
Use Ext.copy instead. This old method would copy the named preoperties even if they did not exist in the source which could produce `undefined` values in the destination.

copyToIf ( destination, source, names ) : Object
deprecated dep

Copies a set of named properties fom the source object to the destination object if the destination object does not already have them.

Example:

var foo = { a: 1, b: 2, c: 3 };

var bar = Ext.copyToIf({ a:42 }, foo, 'a,c');
// bar = { a: 42, c: 3 };

Parameters

destination :  Object

The destination object.

source :  Object

The source object.

names :  String/String[]

Either an Array of property names, or a single string with a list of property names separated by ",", ";" or spaces.

Returns

:Object

The dest object.

Deprecated since version 6.0.1
Use Ext.copyIf instead. This old method would copy the named preoperties even if they did not exist in the source which could produce `undefined` values in the destination.

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

createByAlias ( alias, args ) : Object

Instantiate a class by its alias. This is usually invoked by the shorthand Ext#createByAlias.

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

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

Parameters

alias :  String

args :  Object...

Additional arguments after the alias will be passed to the class constructor.

Returns

:Object

instance

createWidget
deprecated dep private pri

Old name for Ext#widget.

Deprecated since version 5.0
Use Ext#widget instead.

decode ( json, [safe] ) : Object

Shorthand for Ext.JSON#decode Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError unless the safe option is set.

Parameters

json :  String

The JSON string.

safe :  Boolean (optional)

true to return null, otherwise throw an exception if the JSON is invalid.

Defaults to: false

Returns

:Object

The resulting object.

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

deprecate ( packageName, since, closure, scope )
private pri

Create a closure for deprecated code.

// This means Ext.oldMethod is only supported in 4.0.0beta and older.
// If Ext.getVersion('extjs') returns a version that is later than '4.0.0beta', for example '4.0.0RC',
// the closure will not be invoked
Ext.deprecate('extjs', '4.0.0beta', function() {
    Ext.oldMethod = Ext.newMethod;

    ...
});

Parameters

packageName :  String

The package name

since :  String

The last version before it's deprecated

closure :  Function

The callback function to be executed with the specified version is less than the current version

scope :  Object

The execution scope (this) if the closure

deprecated ( suggestion ) : Function
private pri

Create a function that will throw an error if called (in debug mode) with a message that indicates the method has been removed.

Parameters

suggestion :  String

Optional text to include in the message (a workaround perhaps).

Returns

:Function

The generated function.

destroy ( args )

Destroys all of the given objects. If arrays are passed, the elements of these are destroyed recursively.

What it means to "destroy" an object depends on the type of object.

  • Array: Each element of the array is destroyed recursively.
  • Object: Any object with a destroy method will have that method called.

Parameters

args :  Mixed...

Any number of objects or arrays.

destroyMembers ( object, args )

Destroys the specified named members of the given object using Ext.destroy. These properties will be set to null.

Parameters

object :  Object

The object who's properties you wish to destroy.

args :  String...

One or more names of the properties to destroy and remove from the object.

disableCacheBuster ( disable, [path] )

Turns on or off the "cache buster" applied to dynamically loaded scripts. Normally dynamically loaded scripts have an extra query parameter appended to avoid stale cached scripts. This method can be used to disable this mechanism, and is primarily useful for testing. This is done using a cookie.

Parameters

disable :  Boolean

True to disable the cache buster.

path :  String (optional)

An optional path to scope the cookie.

Defaults to: "/"

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.

encode ( o ) : String

Shorthand for Ext.JSON#encode Encodes an Object, Array or other value.

If the environment's native JSON encoding is not being used (Ext#USE_NATIVE_JSON is not set, or the environment does not support it), then ExtJS's encoding will be used. This allows the developer to add a toJSON method to their classes which need serializing to return a valid JSON representation of the object.

Parameters

o :  Object

The variable to encode.

Returns

:String

The JSON string.

exclude ( excludes ) : Object

Explicitly exclude files from being loaded. Useful when used in conjunction with a broad include expression. Can be chained with more require and exclude methods, for example:

Ext.exclude('Ext.data.*').require('*');

Ext.exclude('widget.button*').require('widget.*');

Parameters

excludes :  String/String[]

Returns

:Object

Contains exclude, require and syncRequire methods for chaining.

extend ( superclass, overrides ) : Function
deprecated dep

This method deprecated. Use Ext.define instead.

Parameters

superclass :  Function

overrides :  Object

Returns

:Function

The subclass constructor from the overrides parameter, or a generated one if not provided.

Deprecated since version 4.0.0
Use Ext.define instead

factory ( config, [classReference], [instance], [aliasNamespace] )

A global factory method to instantiate a class from a config object. For example, these two calls are equivalent:

Ext.factory({ text: 'My Button' }, 'Ext.Button');
Ext.create('Ext.Button', { text: 'My Button' });

If an existing instance is also specified, it will be updated with the supplied config object. This is useful if you need to either create or update an object, depending on if an instance already exists. For example:

var button;
button = Ext.factory({ text: 'New Button' }, 'Ext.Button', button);     // Button created
button = Ext.factory({ text: 'Updated Button' }, 'Ext.Button', button); // Button updated

Parameters

config :  Object

The config object to instantiate or update an instance with.

classReference :  String (optional)

The class to instantiate from (if there is a default).

instance :  Object (optional)

The instance to update.

aliasNamespace :  Object (optional)

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.

flatten ( array ) : Array
deprecated dep

Old alias to Ext.Array#flatten Recursively flattens into 1-d Array. Injects Arrays inline.

Parameters

array :  Array

The array to flatten

Returns

:Array

The 1-d array.

Deprecated since version 4.0.0
Use Ext.Array#flatten instead

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

get ( element )

Parameters

element :  Object

getBody Ext.dom.Element

Returns the current document body as an Ext.dom.Element.

Returns

:Ext.dom.Element

The document body.

getClass ( object ) : Ext.Class

Get the class of the provided object; returns null if it's not an instance of any class created with Ext.define. This is usually invoked by the shorthand Ext#getClass.

var component = new Ext.Component();

Ext.getClass(component); // returns Ext.Component

Parameters

object :  Object

Returns

:Ext.Class

class

getClassName ( object ) : String

Get the name of the class by its reference or its instance. This is usually invoked by the shorthand Ext#getClassName.

Ext.ClassManager.getName(Ext.Action); // returns "Ext.Action"

Parameters

object :  Ext.Class/Object

Returns

:String

className

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.

getCompatVersion ( packageName )
private pri

Get the compatibility level (a version number) for the given package name. If none has been registered with Ext.setCompatVersion then Ext.getVersion is used to get the current version.

Available since: 5.0.0

Parameters

packageName :  String

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

getDetachedBody Ext.dom.Element
private pri

Returns an HTML div element into which removed components are placed so that their DOM elements are not garbage collected as detached Dom trees.

Returns

:Ext.dom.Element

getDoc Ext.dom.Element

Returns the current HTML document object as an Ext.dom.Element. Typically used for attaching event listeners to the document. Note: since the document object is not an HTMLElement many of the Ext.dom.Element methods are not applicable and may throw errors if called on the returned Element instance.

Returns

:Ext.dom.Element

The document.

getDom ( el ) : HTMLElement

Return the dom node for the passed String (id), dom node, or Ext.Element. Here are some examples:

// gets dom node based on id
var elDom = Ext.getDom('elId');

// gets dom node based on the dom node
var elDom1 = Ext.getDom(elDom);

// If we don't know if we are working with an
// Ext.Element or a dom node use Ext.getDom
function(el){
    var dom = Ext.getDom(el);
    // do something with the dom node
}

Note: the dom node to be found actually needs to exist (be rendered, etc) when this method is called to be successful.

Parameters

el :  String/HTMLElement/Ext.dom.Element

Returns

:HTMLElement

getElementById ( id )
private pri

Parameters

id :  Object

getHead Ext.dom.Element

Returns the current document head as an Ext.dom.Element.

Returns

:Ext.dom.Element

The document head.

getNamespace ( className ) : String

Parameters

className :  String

Returns

:String

Namespace prefix if it's known, otherwise undefined

getScrollbarSize ( [force] ) : Object

Returns the size of the browser scrollbars. This can differ depending on operating system settings, such as the theme or font size.

Parameters

force :  Boolean (optional)

true to force a recalculation of the value.

Returns

:Object

An object containing scrollbar sizes.

width :  Number

The width of the vertical scrollbar.

height :  Number

The height of the horizontal scrollbar.

getStore ( name ) : Ext.data.Store

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

Parameters

name :  Object

Returns

:Ext.data.Store

getUniqueGlobalNamespace
private pri

Generate a unique reference of Ext in the global scope, useful for sandboxing

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.

getViewportScroller Ext.scroll.Scroller
private pri

Returns

:Ext.scroll.Scroller

getWin Ext.dom.Element

Returns the current window object as an Ext.dom.Element. Typically used for attaching event listeners to the window. Note: since the window object is not an HTMLElement many of the Ext.dom.Element methods are not applicable and may throw errors if called on the returned Element instance.

Returns

:Ext.dom.Element

The window.

globalEval ( code )
private pri

This method evaluates the given code free of any local variable. This will be at global scope, in others it will be in a function.

Parameters

code :  String

The code to evaluate.

htmlDecode ( value ) : String
deprecated dep

Old alias to Ext.String#htmlDecode Convert certain characters (&, <, >, ', and ") from their HTML character equivalents.

Parameters

value :  String

The string to decode.

Returns

:String

The decoded text.

Deprecated
Use Ext.String#htmlDecode instead

htmlEncode ( value ) : String
deprecated dep

Old alias to Ext.String#htmlEncode 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.

Deprecated
Use Ext.String#htmlEncode instead

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

Generates unique ids. If the object/element is passes and it already has an id, it is unchanged.

Parameters

o :  Object (optional)

The object to generate an id for.

prefix :  String (optional)

The id prefix.

Defaults to: ext-gen

Returns

:String

The generated id.

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.

isArray ( target ) : Boolean

Returns true if the passed value is a JavaScript Array, false otherwise.

Parameters

target :  Object

The target to test.

Returns

:Boolean

isBoolean ( value ) : Boolean

Returns true if the passed value is a boolean.

Parameters

value :  Object

The value to test.

Returns

:Boolean

isDate ( object ) : Boolean

Returns true if the passed value is a JavaScript Date object, false otherwise.

Parameters

object :  Object

The object to test.

Returns

:Boolean

isDebugEnabled ( className ) : Boolean

This method returns true if debug is enabled for the specified class. This is done by checking the Ext.debugConfig.hooks config for the closest match to the given className.

Parameters

className :  String

The name of the class.

Returns

:Boolean

true if debug is enabled for the specified class.

isDefined ( value ) : Boolean

Returns true if the passed value is defined.

Parameters

value :  Object

The value to test.

Returns

:Boolean

isElement ( value ) : Boolean

Returns true if the passed value is an HTMLElement

Parameters

value :  Object

The value to test.

Returns

:Boolean

isEmpty ( value, [allowEmptyString] ) : Boolean

Returns true if the passed value is empty, false otherwise. The value is deemed to be empty if it is either:

  • null
  • undefined
  • a zero-length array
  • a zero-length string (Unless the allowEmptyString parameter is set to true)

Parameters

value :  Object

The value to test.

allowEmptyString :  Boolean (optional)

true to allow empty strings.

Defaults to: false

Returns

:Boolean

isFunction ( value ) : Boolean

Returns true if the passed value is a JavaScript Function, false otherwise.

Parameters

value :  Object

The value to test.

Returns

:Boolean

isIterable ( value ) : Boolean

Returns true if the passed value is iterable, that is, if elements of it are addressable using array notation with numeric indices, false otherwise.

Arrays and function arguments objects are iterable. Also HTML collections such as NodeList and `HTMLCollection' are iterable.

Parameters

value :  Object

The value to test

Returns

:Boolean

isMSDate ( value ) : Boolean

Returns 'true' if the passed value is a String that matches the MS Date JSON encoding format.

Parameters

value :  String

The string to test.

Returns

:Boolean

isNumber ( value ) : Boolean

Returns true if the passed value is a number. Returns false for non-finite numbers.

Parameters

value :  Object

The value to test.

Returns

:Boolean

isNumeric ( value ) : Boolean

Validates that a value is numeric.

Parameters

value :  Object

Examples: 1, '1', '2.34'

Returns

:Boolean

True if numeric, false otherwise

isObject ( value ) : Boolean

Returns true if the passed value is a JavaScript Object, false otherwise.

Parameters

value :  Object

The value to test.

Returns

:Boolean

isPrimitive ( value ) : Boolean

Returns true if the passed value is a JavaScript 'primitive', a string, number or boolean.

Parameters

value :  Object

The value to test.

Returns

:Boolean

isSimpleObject ( value )
private pri

Parameters

value :  Object

isString ( value ) : Boolean

Returns trueif the passed value is a string.

Parameters

value :  Object

The value to test.

Returns

:Boolean

isTextNode ( value ) : Boolean

Returns true if the passed value is a TextNode

Parameters

value :  Object

The value to test.

Returns

:Boolean

iterate ( object, fn, [scope] )

Iterates either an array or an object. This method delegates to Ext.Array.each if the given value is iterable, and Ext.Object.each otherwise.

Parameters

object :  Object/Array

The object or array to be iterated.

fn :  Function

The function to be called for each iteration. See and Ext.Array.each and Ext.Object.each for detailed lists of arguments passed to this function depending on the given object type that is being iterated.

scope :  Object (optional)

The scope (this reference) in which the specified function is executed. Defaults to the object being iterated itself.

log ( [options], [message] )

Logs a message. If a console is present it will be used. On Opera, the method "opera.postError" is called. In other cases, the message is logged to an array "Ext.log.out". An attached debugger can watch this array and view the log. The log buffer is limited to a maximum of "Ext.log.max" entries (defaults to 250).

If additional parameters are passed, they are joined and appended to the message. A technique for tracing entry and exit of a function is this:

function foo () {
    Ext.log({ indent: 1 }, '>> foo');

    // log statements in here or methods called from here will be indented
    // by one step

    Ext.log({ outdent: 1 }, '<< foo');
}

This method does nothing in a release build.

Parameters

options :  String/Object (optional)

The message to log or an options object with any of the following properties:

  • msg: The message to log (required).
  • level: One of: "error", "warn", "info" or "log" (the default is "log").
  • dump: An object to dump to the log as part of the message.
  • stack: True to include a stack trace in the log.
  • indent: Cause subsequent log statements to be indented one step.
  • outdent: Cause this and following statements to be one step less indented.

message :  String... (optional)

The message to log (required unless specified in options object).

makeIdSelector ( id ) : String
private pri

Converts an id ('foo') into an id selector ('#foo'). This method is used internally by the framework whenever an id needs to be converted into a selector and is provided as a hook for those that need to escape IDs selectors since, as of Ext 5.0, the framework no longer escapes IDs by default.

Parameters

id :  String

Returns

:String

max ( array, [comparisonFn] ) : Object
deprecated dep

Old alias to Ext.Array#max Returns the maximum value in the Array.

Parameters

array :  Array/NodeList

The Array from which to select the maximum value.

comparisonFn :  Function (optional)

a function to perform the comparison which determines maximization. If omitted the ">" operator will be used. Note: gt = 1; eq = 0; lt = -1

max :  Mixed

Current maximum value.

item :  Mixed

The value to compare with the current maximum.

Returns

:Object

maxValue The maximum value.

Deprecated since version 4.0.0
Use Ext.Array#max instead

mean ( array ) : Number
deprecated dep

Old alias to Ext.Array#mean Calculates the mean of all items in the array.

Parameters

array :  Array

The Array to calculate the mean value of.

Returns

:Number

The mean.

Deprecated since version 4.0.0
Use Ext.Array#mean instead

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.

min ( array, [comparisonFn] ) : Object
deprecated dep

Old alias to Ext.Array#min Returns the minimum value in the Array.

Parameters

array :  Array/NodeList

The Array from which to select the minimum value.

comparisonFn :  Function (optional)

a function to perform the comparison which determines minimization. If omitted the "<" operator will be used. Note: gt = 1; eq = 0; lt = -1

min :  Mixed

Current minimum value.

item :  Mixed

The value to compare with the current minimum.

Returns

:Object

minValue The minimum value.

Deprecated since version 4.0.0
Use Ext.Array#min instead

namespace ( namespaces ) : Object

Creates namespaces to be used for scoping variables and classes so that they are not global. Specifying the last node of a namespace implicitly creates all other nodes. Usage:

Ext.namespace('Company', 'Company.data');

// equivalent and preferable to the above syntax
Ext.ns('Company.data');

Company.Widget = function() { ... };

Company.data.CustomStore = function(config) { ... };

Parameters

namespaces :  String...

Returns

:Object

The (last) namespace object created.

now Number

Returns the current timestamp.

Returns

:Number

Milliseconds since UNIX epoch.

ns ( namespaces ) : Object

Convenient alias for Ext.namespace. Creates namespaces to be used for scoping variables and classes so that they are not global. Specifying the last node of a namespace implicitly creates all other nodes. Usage:

Ext.namespace('Company', 'Company.data');

// equivalent and preferable to the above syntax
Ext.ns('Company.data');

Company.Widget = function() { ... };

Company.data.CustomStore = function(config) { ... };

Parameters

namespaces :  String...

Returns

:Object

The (last) namespace object created.

num ( value, defaultValue ) : Number
deprecated dep

Validate that a value is numeric and convert it to a number if necessary. Returns the specified default value if it is not.

Ext.Number.from('1.23', 1); // returns 1.23 Ext.Number.from('abc', 1); // returns 1

Parameters

value :  Object

defaultValue :  Number

The value to return if the original value is non-numeric

Returns

:Number

value, if numeric, defaultValue otherwise

Deprecated since version 4.0.0
Please use Ext.Number#from instead.

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

 handler('foo', 42, <actual event 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();

onDocumentReady ( fn, [scope], [options] )
private pri

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

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

override ( target, overrides )

Overrides members of the specified target with the given values.

If the target is a class declared using Ext.define, the override method of that class is called (see Ext.Base#override) given the overrides.

If the target is a function, it is assumed to be a constructor and the contents of overrides are applied to its prototype using Ext.apply.

If the target is an instance of a class declared using Ext.define, the overrides are applied to only that instance. In this case, methods are specially processed to allow them to use Ext.Base#callParent.

 var panel = new Ext.Panel({ ... });

 Ext.override(panel, {
     initComponent: function () {
         // extra processing...

         this.callParent();
     }
 });

If the target is none of these, the overrides are applied to the target using Ext.apply.

Please refer to Ext.define and Ext.Base#override for further details.

Parameters

target :  Object

The target to override.

overrides :  Object

The properties to add or replace on target.

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.

pluck ( array, propertyName ) : Array
deprecated dep

Old alias to Ext.Array.pluck Plucks the value of a property from each item in the Array. Example:

Ext.Array.pluck(Ext.query("p"), "className"); // [el1.className, el2.className, ..., elN.className]

Parameters

array :  Array/NodeList

The Array of items to pluck the value from.

propertyName :  String

The property name to pluck from each element.

Returns

:Array

The value from each item in the Array.

Deprecated since version 4.0.0
Use Ext.Array.pluck instead

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.

removeNode ( node )

Removes an HTMLElement from the document. If the HTMLElement was previously cached by a call to Ext.get(), removeNode will call the destroy method of the Ext.dom.Element instance, which removes all DOM event listeners, and deletes the cache reference.

Parameters

node :  HTMLElement

The node to remove

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.

resolveResource ( url ) : String

Resolves a resource URL that may contain a resource pool identifier token at the front. The tokens are formatted as HTML tags "<poolName@packageName>" followed by a normal relative path. This token is only processed if present at the first character of the given string.

These tokens are parsed and the pieces are then passed to the Ext#getResourcePath method.

For example:

 [{
     xtype: 'image',
     src: '<shared>images/foo.png'
 },{
     xtype: 'image',
     src: '<@package>images/foo.png'
 },{
     xtype: 'image',
     src: '<shared@package>images/foo.png'
 }]

In the above example, "shared" is the name of a Sencha Cmd resource pool and "package" is the name of a Sencha Cmd package.

Available since: 6.0.1

Parameters

url :  String

The URL that may contain a resource pool token at the front.

Returns

:String

resumeLayouts ( flush )

Parameters

flush :  Object

returnId ( o )

A reusable function which returns the value of getId() called upon a single passed parameter. Useful when creating a Ext.util.MixedCollection of objects keyed by an identifier returned from a getId method.

Parameters

o :  Object

returnTrue Boolean

A reusable function which returns true.

Returns

:Boolean

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

setCompatVersion ( packageName, version )
private pri

Set the compatibility level (a version number) for the given package name.

Available since: 5.0.0

Parameters

packageName :  String

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

version :  String/Ext.Version

The version, e.g. '4.2'.

setGlyphFontFamily ( fontFamily )

Sets the default font-family to use for components that support a glyph config.

Parameters

fontFamily :  String

The name of the font-family

setVersion ( packageName, version ) : Ext
chainable ch

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

setViewportScroller ( scroller )
private pri

Parameters

scroller :  Ext.scroll.Scroller

sum ( array ) : Number
deprecated dep

Old alias to Ext.Array#sum Calculates the sum of all items in the given array.

Parameters

array :  Array

The Array to calculate the sum value of.

Returns

:Number

The sum.

Deprecated since version 4.0.0
Use Ext.Array#sum instead

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.

ticks Number

Returns the current high-resolution timestamp.

Available since: 6.0.1

Returns

:Number

Milliseconds ellapsed since arbitrary epoch.

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

typeOf ( value ) : String

Returns the type of the given variable in string format. List of possible values are:

  • undefined: If the given value is undefined
  • null: If the given value is null
  • string: If the given value is a string
  • number: If the given value is a number
  • boolean: If the given value is a boolean value
  • date: If the given value is a Date object
  • function: If the given value is a function reference
  • object: If the given value is an object
  • array: If the given value is an array
  • regexp: If the given value is a regular expression
  • element: If the given value is a DOM Element
  • textnode: If the given value is a DOM text node and contains something other than whitespace
  • whitespace: If the given value is a DOM text node and contains only whitespace

Parameters

value :  Object

Returns

:String

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'
});

Returns

:

unique ( array ) : Array
deprecated dep

Old alias to Ext.Array#unique Returns a new array with unique items.

Parameters

array :  Array

Returns

:Array

results

Deprecated since version 4.0.0
Use Ext.Array#unique instead

urlAppend ( url, string ) : String
deprecated dep

Old alias to Ext.String#urlAppend 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

Deprecated
Use Ext.String#urlAppend instead

urlDecode ( queryString, [recursive] ) : Object
deprecated dep

Alias for Ext.Object#fromQueryString. Converts a query string back into an object.

Non-recursive:

Ext.Object.fromQueryString("foo=1&bar=2"); // returns {foo: '1', bar: '2'}
Ext.Object.fromQueryString("foo=&bar=2"); // returns {foo: '', bar: '2'}
Ext.Object.fromQueryString("some%20price=%24300"); // returns {'some price': '$300'}
Ext.Object.fromQueryString("colors=red&colors=green&colors=blue"); // returns {colors: ['red', 'green', 'blue']}

Recursive:

Ext.Object.fromQueryString(
    "username=Jacky&"+
    "dateOfBirth[day]=1&dateOfBirth[month]=2&dateOfBirth[year]=1911&"+
    "hobbies[0]=coding&hobbies[1]=eating&hobbies[2]=sleeping&"+
    "hobbies[3][0]=nested&hobbies[3][1]=stuff", true);

// returns
{
    username: 'Jacky',
    dateOfBirth: {
        day: '1',
        month: '2',
        year: '1911'
    },
    hobbies: ['coding', 'eating', 'sleeping', ['nested', 'stuff']]
}

Parameters

queryString :  String

The query string to decode

recursive :  Boolean (optional)

Whether or not to recursively decode the string. This format is supported by PHP / Ruby on Rails servers and similar.

Defaults to: false

Returns

:Object

Deprecated since version 4.0.0
Use Ext.Object#fromQueryString instead

urlEncode ( object, [recursive] ) : String
deprecated dep

Takes an object and converts it to an encoded query string.

Non-recursive:

Ext.Object.toQueryString({foo: 1, bar: 2}); // returns "foo=1&bar=2"
Ext.Object.toQueryString({foo: null, bar: 2}); // returns "foo=&bar=2"
Ext.Object.toQueryString({'some price': '$300'}); // returns "some%20price=%24300"
Ext.Object.toQueryString({date: new Date(2011, 0, 1)}); // returns "date=%222011-01-01T00%3A00%3A00%22"
Ext.Object.toQueryString({colors: ['red', 'green', 'blue']}); // returns "colors=red&colors=green&colors=blue"

Recursive:

Ext.Object.toQueryString({
    username: 'Jacky',
    dateOfBirth: {
        day: 1,
        month: 2,
        year: 1911
    },
    hobbies: ['coding', 'eating', 'sleeping', ['nested', 'stuff']]
}, true); // returns the following string (broken down and url-decoded for ease of reading purpose):
// username=Jacky
//    &dateOfBirth[day]=1&dateOfBirth[month]=2&dateOfBirth[year]=1911
//    &hobbies[0]=coding&hobbies[1]=eating&hobbies[2]=sleeping&hobbies[3][0]=nested&hobbies[3][1]=stuff

Parameters

object :  Object

The object to encode

recursive :  Boolean (optional)

Whether or not to interpret the object in recursive format. (PHP / Ruby on Rails servers and similar).

Defaults to: false

Returns

:String

queryString

Deprecated since version 4.0.0
Use Ext.Object#toQueryString instead

valueFrom ( value, defaultValue, [allowBlank] ) : Object

Returns the given value itself if it's not empty, as described in Ext#isEmpty; returns the default value (second argument) otherwise.

Parameters

value :  Object

The value to test.

defaultValue :  Object

The value to return if the original value is empty.

allowBlank :  Boolean (optional)

true to allow zero length strings to qualify as non-empty.

Defaults to: false

Returns

:Object

value, if non-empty, else defaultValue.

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

Ext JS 6.2.0 - Classic Toolkit