Ext singleton

debugConfig : Object

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

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

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

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

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

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

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

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

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

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

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

manifest : String / Ext.Manifest

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

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

Available since: 5.0.0

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

chromeVersion : Number

readonly ro

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

emptyFn : Function

A reusable empty function.

enableGarbageCollector

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

Defaults to:

false

enableListenerCollection

True to automatically purge event listeners during garbageCollection.

Defaults to:

true

firefoxVersion : Number

readonly ro

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

frameStartTime : Date

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

identityFn : Function

A reusable identity function that simply returns its first argument.

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

isWebKit : Boolean

readonly ro

True if the detected browser uses WebKit.

isWindows : Boolean

readonly ro

True if the detected platform is Windows.

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

safariVersion : Number

readonly ro

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

SSL_SECURE_URL : String

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

USE_NATIVE_JSON : Boolean

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

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

Defaults to:

false

webKitVersion : Number

readonly ro

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

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

Same as Ext.ComponentQuery#query.

Parameters

Returns

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

Returns

asapCancel ( id )

Cancels a previously scheduled call to Ext#asap.

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

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

Parameters

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

Returns

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

Returns

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

Returns

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

Returns

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

Returns

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

Returns

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

Returns

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

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

Parameters

Returns

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

Returns

get

getCmp ( id ) : Ext.Component

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

Parameters

Returns

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

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

Parameters

Returns

getVersion ( [packageName] ) : Ext.Version

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

Parameters

Returns

htmlDecode ( value ) : String

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

Parameters

Returns

htmlEncode ( value ) : String

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

Parameters

Returns

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

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

Parameters

Returns

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

Returns

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

Returns

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

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

 panel.body.un(...)

false

'current'

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

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

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

Returns

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

Ext.destroy(this.btnListeners);

this.btnListeners.destroy();

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

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

Parameters

0

0

false

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

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

For example:

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

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

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

Ext.pass is alias for Ext.Function.pass

Parameters

Returns

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

Returns

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

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

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

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

Returns

setVersion ( packageName, version ) : Ext

Set version number for the given package name.

Parameters

Returns

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

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

Returns

un ( eventName, fn, [scope] )

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

Parameters

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

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

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

urlAppend ( url, string ) : String

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

Parameters

Returns

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

Returns