Ext JS Sencha Docs

Ext

Files

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

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

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

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

 Ext.application({
     name: 'MyApp',

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

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

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

For more information about how to use the Ext classes, see:

Defined By

Config options

This object is used to enable or disable debugging for classes or namespaces. ...

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.

This object is initialized prior to loading the framework (Ext JS or Sencha Touch) and contains settings and other in...

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.

Available since: 5.0.0

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

Defined By

Properties

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

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

Defaults to: {}

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

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

URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent the IE insecure content...

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

Indicates whether to use native browser parsing for JSON methods. ...

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

The base prefix to use for all Ext components. ...

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

: Objectprivatereadonly

Stores Fly instances keyed by their assigned or generated name.

Stores Fly instances keyed by their assigned or generated name.

Available since: 5.0.0

...

Defaults to: {}

A reusable empty function.

A reusable empty function.

A zero length string which will pass a truth test. ...

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.

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

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

Defaults to: true

true to automatically uncache orphaned Ext.Elements periodically. ...

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

Defaults to: false

True to automatically purge event listeners during garbageCollection. ...

True to automatically purge event listeners during garbageCollection.

Defaults to: true

An array containing extra enumerables for old browsers

An array containing extra enumerables for old browsers

This indicate the start timestamp of current cycle. ...

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

A reusable identity function that simply returns its first argument.

A reusable identity function that simply returns its first argument.

true when the document body is ready for use.

true when the document body is ready for use.

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

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

True if the page is running over SSL

True if the page is running over SSL

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

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'

A reusable empty function for use as privates members. ...

A reusable empty function for use as privates members.

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

     privates: {
         privateNothing: Ext.privateFn
     }
 });
The top level inheritedState to which all other inheritedStates are chained. ...

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

Set this to true before onReady to prevent any styling from being added to the body element. ...

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.

Regular expression used for validating identifiers. ...

Regular expression used for validating identifiers.

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

...

Defaults to: {}

Defined By

Methods

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

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

See Ext.app.Application for details.

Parameters

( object, config, [defaults] ) : Object
Copies all the properties of config to the specified 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, config ) : Object
Copies all the properties of config to object if they don't already exist. ...

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

( fn, [scope] )
Utility wrapper that suspends layouts of all components for the duration of a given function. ...

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.

( fn, [scope], [args], [appendArgs] ) : Function
Create a new function from the provided fn, change this to the provided scope, optionally overrides arguments for the...

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

( callback, [scope], [args], [delay], [caller], [defaultScope] ) : Object
Execute a callback function in a particular scope. ...

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

  • Object

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

( specs, [matchAll] ) : Boolean
This method checks the registered package versions against the provided version specs. ...

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)

 foo@1.0         (exactly version 1.0 of package "foo")
 foo@1.0-1.3     (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',
         'foo@1.0.1 - 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',
         'foo@1.0.1 - 2.0.1'
     ]
 });

 !Ext.checkVersion([
         '4.2.2',
         'foo@1.0.1 - 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('foo@1.0.1');

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

 // 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: [
                 'foo@1.0.1-1.0.2',
                 'bar@3.0+'
             ]
         }
     ]
 });

Version Comparisons

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

This also applies to ranges. For example "foo@1.2-2.2" 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.

( array ) : Arraydeprecated
Old alias to Ext.Array.clean ...

Old alias to Ext.Array.clean

This method has been deprecated since 4.0.0

Use Ext.Array.clean instead

Parameters

Returns

Clone simple variables including array, {}-like objects, DOM nodes and Date without keeping the old reference. ...

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 decendant of Object. For model cloning, see Model.copy.

Parameters

  • item : Object

    The variable to clone

Returns

( from, to ) : Object
Coerces the first value if possible so that it is comparable to the second value. ...

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

( dest, source, names, [usePrototypeKeys] ) : Object
Copies a set of named properties fom the source object to the destination 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.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: falae

Returns

( [name], [args] ) : Object
Instantiate a class by either full name, alias or alternate name. ...

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

( alias, args ) : Object
Instantiate a class by its alias. ...

Instantiate a class by its alias. This is usually invoked by the shorthand 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

( )deprecatedprivate
Old name for widget. ...

Old name for widget.

This method has been deprecated

Use widget instead.

( json, [safe] ) : Object
Shorthand for Ext.JSON.decode ...

Shorthand for Ext.JSON.decode

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

( fn, millis, [scope], [args], [appendArgs] ) : Number
Calls this function after the number of milliseconds specified, optionally in a specific scope. ...

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.

( className, data, [createdFn] ) : Ext.Base
Defines a class or override. ...

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:

 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',
         'foo@1.0.1-1.0.2'
     ],

     //...
 });

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',
             'foo@1.0.1-1.0.2'
         ]
     },

     //...
 });

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: [
                     'foo@1.0.1-1.0.2',
                     'bar@3.0+'
                 ]
             }
         ]
     },

     //...
 });

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: - mixins - statics - config - alias - xtype (for Components only) - self - singleton - alternateClassName - override

  • 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

( packageName, since, closure, scope )private
Create a closure for deprecated code. ...

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

Destroys all of the given objects. ...

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

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.

( object, args )
Destroys the specified named members of the given object using Ext.destroy. ...

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.

( iterable, fn, [scope], [reverse] ) : Boolean
Iterates an array or an iterable value and invoke the given callback function for each item. ...

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 in the function callback.

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.

    Parameters

    • 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

    Returns

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

Shorthand for Ext.JSON.encode ...

Shorthand for Ext.JSON.encode

Parameters

  • o : Object

    The variable to encode.

Returns

( excludes ) : Object
Explicitly exclude files from being loaded. ...

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

Returns

  • Object

    Contains exclude, require and syncRequire methods for chaining.

( superclass, overrides ) : Functiondeprecated
This method deprecated. ...

This method deprecated. Use Ext.define instead.

This method has been deprecated since 4.0.0

Use Ext.define instead

Parameters

Returns

  • Function

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

( config, classReference, [instance], [aliasNamespace] )
A global factory method to instantiate a class from a config object. ...

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

    The class to instantiate from.

  • instance : Object (optional)

    The instance to update.

  • aliasNamespace : Object (optional)
( array ) : Arraydeprecated
Old alias to Ext.Array.flatten ...

Old alias to Ext.Array.flatten

This method has been deprecated since 4.0.0

Use Ext.Array.flatten instead

Parameters

  • array : Array

    The array to flatten

Returns

( dom, [named] ) : Ext.dom.Element
Gets the globally shared flyweight Element, with the passed node as the active 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. 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).

Retrieves Ext.dom.Element objects. ...

Retrieves Ext.dom.Element objects. get is alias for Ext.dom.Element.get.

This method does not retrieve Components. This method retrieves Ext.dom.Element objects which encapsulate DOM elements. To retrieve a Component by its ID, use Ext.ComponentManager.get.

When passing an id, it should not include the # character that is used for a css selector.

// For an element with id 'foo'
Ext.get('foo'); // Correct
Ext.get('#foo'); // Incorrect

Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with the same id via AJAX or DOM.

Parameters

Returns

  • Ext.dom.Element

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

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

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

Returns

Get the class of the provided object; returns null if it's not an instance of any class created with Ext.define. ...

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

var component = new Ext.Component();

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

Parameters

Returns

Get the name of the class by its reference or its instance. ...

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

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

Parameters

Returns

This is shorthand reference to Ext.ComponentManager.get. ...

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

Parameters

Returns

( packageName )private
Get the compatibility level (a version number) for the given package name. ...

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

Returns an HTML div element into which removed components are placed so that their DOM elements are not garbage colle...

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

Returns the current HTML document object as an 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

( el ) : HTMLElement
Return the dom node for the passed String (id), dom node, or Ext.Element. ...

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

Returns

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

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

Returns

Returns the size of the browser scrollbars. ...

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.

Shortcut to Ext.data.StoreManager.lookup. ...

Shortcut to Ext.data.StoreManager.lookup.

Parameters

  • store : String/Object

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

Returns

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

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

( [packageName] ) : Ext.Version
Get the version number of the supplied package name; will return the version of the framework. ...

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

Returns the current window object as an 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

( value ) : Stringdeprecated
Old alias to Ext.String.htmlDecode ...

Old alias to Ext.String.htmlDecode

This method has been deprecated

Use Ext.String.htmlDecode instead

Parameters

  • value : String

    The string to decode.

Returns

( value ) : Stringdeprecated
Old alias to Ext.String.htmlEncode ...

Old alias to Ext.String.htmlEncode

This method has been deprecated

Use Ext.String.htmlEncode instead

Parameters

  • value : String

    The string to encode.

Returns

( [o], [prefix] ) : String
Generates unique ids. ...

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

( fn, millis, [scope], [args], [appendArgs] ) : Number
Calls this function repeatedly at a given interval, optionally in a specific scope. ...

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.

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

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

Parameters

  • target : Object

    The target to test.

Returns

Returns true if the passed value is a boolean. ...

Returns true if the passed value is a boolean.

Parameters

  • value : Object

    The value to test.

Returns

( object ) : Boolean
Returns true if the passed value is a JavaScript Date object, false otherwise. ...

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

Parameters

  • object : Object

    The object to test.

Returns

This method returns true if debug is enabled for the specified class. ...

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.

Returns true if the passed value is defined. ...

Returns true if the passed value is defined.

Parameters

  • value : Object

    The value to test.

Returns

Returns true if the passed value is an HTMLElement ...

Returns true if the passed value is an HTMLElement

Parameters

  • value : Object

    The value to test.

Returns

( value, [allowEmptyString] ) : Boolean
Returns true if the passed value is empty, false otherwise. ...

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

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

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

Parameters

  • value : Object

    The value to test.

Returns

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

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

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

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

Returns true if the passed value is a number. ...

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

Parameters

  • value : Object

    The value to test.

Returns

Validates that a value is numeric. ...

Validates that a value is numeric.

Parameters

  • value : Object

    Examples: 1, '1', '2.34'

Returns

  • Boolean

    True if numeric, false otherwise

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

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

Parameters

  • value : Object

    The value to test.

Returns

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

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

Parameters

  • value : Object

    The value to test.

Returns

( value )private
...

Parameters

Returns trueif the passed value is a string. ...

Returns trueif the passed value is a string.

Parameters

  • value : Object

    The value to test.

Returns

Returns true if the passed value is a TextNode ...

Returns true if the passed value is a TextNode

Parameters

  • value : Object

    The value to test.

Returns

( object, fn, [scope] )
Iterates either an array or an object. ...

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.

( [options], [message] )
Logs a 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).

Converts an id ('foo') into an id selector ('#foo'). ...

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

Returns

( array, [comparisonFn] ) : Objectdeprecated
Old alias to Ext.Array.max ...

Old alias to Ext.Array.max

This method has been deprecated since 4.0.0

Use Ext.Array.max instead

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

    Parameters

    • max : Mixed

      Current maximum value.

    • item : Mixed

      The value to compare with the current maximum.

Returns

  • Object

    maxValue The maximum value.

( array ) : Numberdeprecated
Old alias to Ext.Array.mean ...

Old alias to Ext.Array.mean

This method has been deprecated since 4.0.0

Use Ext.Array.mean instead

Parameters

  • array : Array

    The Array to calculate the mean value of.

Returns

( destination, object ) : Object
A convenient alias method for Ext.Object.merge. ...

A convenient alias method for Ext.Object.merge.

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.

( array, [comparisonFn] ) : Objectdeprecated
Old alias to Ext.Array.min ...

Old alias to Ext.Array.min

This method has been deprecated since 4.0.0

Use Ext.Array.min instead

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

    Parameters

    • min : Mixed

      Current minimum value.

    • item : Mixed

      The value to compare with the current minimum.

Returns

  • Object

    minValue The minimum value.

( namespaces ) : Object
Creates namespaces to be used for scoping variables and classes so that they are not global. ...

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

Returns

  • Object

    The namespace object. (If multiple arguments are passed, this will be the last namespace created)

Returns the current timestamp. ...

Returns the current timestamp.

Returns

  • Number

    Milliseconds since UNIX epoch.

( namespaces ) : Object
Convenient alias for Ext.namespace. ...

Convenient alias for Ext.namespace.

Parameters

Returns

  • Object

    The namespace object. (If multiple arguments are passed, this will be the last namespace created)

( value, defaultValue ) : Numberdeprecated
Validate that a value is numeric and convert it to a number if necessary. ...

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

This method has been deprecated since 4.0.0

Please use Ext.Number.from instead.

Parameters

  • value : Object
  • defaultValue : Number

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

Returns

  • Number

    value, if numeric, defaultValue otherwise

( eventName, [fn], [scope], [options] ) : Object
Shorthand for Ext.GlobalEvents.addListener. ...

Shorthand for Ext.GlobalEvents.addListener.

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 (optional)

    The method the event invokes, or if scope is specified, the name* of the method within the specified scope. Will be called with arguments given to 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: Unlike in ExtJS 3.x, 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 Components. The name of a Component property which references an element to add a listener to.

      This option is useful during Component construction to add DOM event listeners to elements of Components which will exist only after the Component is rendered. For example, to add a click listener to a Panel's body:

        new Ext.panel.Panel({
            title: 'The title',
            listeners: {
                click: this.handlePanelClick,
                element: 'body'
            }
        });
      
    • 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.

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

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

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();
    
( fn, [scope], [options] )private
Adds a listener to be notified when the document is ready (before onload and before images are loaded). ...

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

( fn, [scope], [options] )
Adds a listener to be notified when the document is ready (before onload and before images are loaded). ...

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

( target, overrides )
Overrides members of the specified target with the given values. ...

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.

( fn, args, [scope] ) : Function
Create a new function from the provided fn, the arguments of which are pre-set to args. ...

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

( array, propertyName ) : Arraydeprecated
Old alias to Ext.Array.pluck ...

Old alias to Ext.Array.pluck

This method has been deprecated since 4.0.0

Use Ext.Array.pluck instead

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.

( selector, [asDom], [root] ) : HTMLElement[]/Ext.dom.Element[]
Selects child nodes of a given root based on the passed CSS selector. ...

Selects child nodes of a given root based on the passed CSS selector. For details on selectors see query.

Parameters

  • selector : String

    The CSS selector.

  • asDom : Boolean (optional)

    false to return an array of Ext.dom.Element

    Defaults to: true

  • root : HTMLElement/String (optional)

    The root element of the query or id of the root

Returns

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

    An Array of elements that match the selector. If there are no matches, an empty Array is returned.

( id, config )
Creates a new store for the given id and config, then registers it with the Store Manager. ...

Creates a new store for the given id and config, then registers it with the Store Manager. 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

    The id to set on the new store

  • config : Object

    The store config

Removes an HTMLElement from the document. ...

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

( expressions, [fn], [scope] )
Loads all classes by the given names and all their direct dependencies; optionally executes the given callback functi...

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.

Resumes layout activity in the whole framework. ...

Resumes layout activity in the whole framework.

suspendLayouts is alias of Ext.Component.suspendLayouts.

Parameters

  • flush : Boolean (optional)

    true to perform all the pending layouts. This can also be achieved by calling flushLayouts directly.

    Defaults to: false

A reusable function which returns the value of getId() called upon a single passed parameter. ...

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

A reusable function which returns true. ...

A reusable function which returns true.

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

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

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

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

Parameters

  • fontFamily : String

    The name of the font-family

( packageName, version ) : Extchainable
Set version number for the given package name. ...

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

( array ) : Numberdeprecated
Old alias to Ext.Array.sum ...

Old alias to Ext.Array.sum

This method has been deprecated since 4.0.0

Use Ext.Array.sum instead

Parameters

  • array : Array

    The Array to calculate the sum value of.

Returns

Stops layouts from happening in the whole framework. ...

Stops layouts from happening in the whole framework.

It's useful to suspend the layout activity while updating multiple components and containers:

Ext.suspendLayouts();
// batch of updates...
Ext.resumeLayouts(true);

suspendLayouts is alias of Ext.Component.suspendLayouts.

See also batchLayouts for more abstract way of doing this.

( expressions, [fn], [scope] )
Synchronously loads all classes by the given names and all their direct dependencies; optionally executes the given c...

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.

( iterable, [start], [end] ) : Array
Converts any iterable (numeric indices and a length property) into a true 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

Returns the type of the given variable in string format. ...

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

Returns

( eventName, fn, [scope] )
Shorthand for Ext.GlobalEvents.removeListener. ...

Shorthand for Ext.GlobalEvents.removeListener.

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 addListener or the listener will not be removed.

( array ) : Arraydeprecated
Old alias to Ext.Array.unique ...

Old alias to Ext.Array.unique

This method has been deprecated since 4.0.0

Use Ext.Array.unique instead

Parameters

Returns

( url, string ) : Stringdeprecated
Old alias to Ext.String.urlAppend ...

Old alias to Ext.String.urlAppend

This method has been deprecated

Use Ext.String.urlAppend instead

Parameters

  • url : String

    The URL to append to.

  • string : String

    The content to append to the URL.

Returns

( queryString, [recursive] ) : Objectdeprecated
Alias for Ext.Object.fromQueryString. ...

Alias for Ext.Object.fromQueryString.

This method has been deprecated since 4.0.0

Use Ext.Object.fromQueryString instead

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, [recursive] ) : Stringdeprecated
Takes an object and converts it to an encoded query string. ...

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

This method has been deprecated since 4.0.0

Use Ext.Object.toQueryString instead

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

( value, defaultValue, [allowBlank] ) : Object
Returns the given value itself if it's not empty, as described in isEmpty; returns the default value (second argument...

Returns the given value itself if it's not empty, as described in 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.

( [name], [config] ) : Object
Convenient shorthand to create a widget by its xtype or a 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 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