Many classes have shortcut names used when creating (instantiating) a class with a
configuration object. The shortcut name is referred to as an alias (or xtype if the
class extends Ext.Component). The alias/xtype is listed next to the class name of
applicable classes for quick reference.
Framework classes or their members may be specified as private or protected. Else,
the class / member is public. Public, protected, and private are access
descriptors used to convey how and when the class or class member should be used.
Public classes and class members are available for use by any other class or application code and may be relied upon as a stable and persistent within major product versions. Public classes and members may safely be extended via a subclass.
Protected class members are stable public members intended to be used by the
owning class or its subclasses. Protected members may safely be extended via a subclass.
Private classes and class members are used internally by the framework and are not intended to be used by application developers. Private classes and members may change or be omitted from the framework at any time without notice and should not be relied upon in application logic.
static label next to the
method name. *See Static below.Below is an example class member that we can disect to show the syntax of a class member (the lookupComponent method as viewed from the Ext.button.Button class in this case).
Let's look at each part of the member row:
lookupComponent in this example)( item ) in this example)Ext.Component in this case). This may be omitted for methods that do not
return anything other than undefined or may display as multiple possible values
separated by a forward slash / signifying that what is returned may depend on the
results of the method call (i.e. a method may return a Component if a get method calls is
successful or false if unsuccessful which would be displayed as
Ext.Component/Boolean).PROTECTED in
this example - see the Flags section below)Ext.container.Container in this example). The source
class will be displayed as a blue link if the member originates from the current class
and gray if it is inherited from an ancestor or mixed-in class.view source in the example)item : Object in the example).undefined a "Returns" section
will note the type of class or object returned and a description (Ext.Component in the
example)Available since 3.4.0 - not pictured in
the example) just after the member descriptionDefaults to: false)The API documentation uses a number of flags to further commnicate the class member's function and intent. The label may be represented by a text label, an abbreviation, or an icon.
classInstance.method1().method2().etc();false is returned from
an event handler- Indicates a framework class
- A singleton framework class. *See the singleton flag for more information
- A component-type framework class (any class within the Ext JS framework that extends Ext.Component)
- Indicates that the class, member, or guide is new in the currently viewed version
- Indicates a class member of type config
- Indicates a class member of type property
- Indicates a class member of type
method
- Indicates a class member of type event
- Indicates a class member of type
theme variable
- Indicates a class member of type
theme mixin
- Indicates that the class, member, or guide is new in the currently viewed version
Just below the class name on an API doc page is a row of buttons corresponding to the types of members owned by the current class. Each button shows a count of members by type (this count is updated as filters are applied). Clicking the button will navigate you to that member section. Hovering over the member-type button will reveal a popup menu of all members of that type for quick navigation.
Getting and setter methods that correlate to a class config option will show up in the methods section as well as in the configs section of both the API doc and the member-type menus just beneath the config they work with. The getter and setter method documentation will be found in the config row for easy reference.
Your page history is kept in localstorage and displayed (using the available real estate) just below the top title bar. By default, the only search results shown are the pages matching the product / version you're currently viewing. You can expand what is displayed by clicking on the button on the right-hand side of the history bar and choosing the "All" radio option. This will show all recent pages in the history bar for all products / versions.
Within the history config menu you will also see a listing of your recent page visits. The results are filtered by the "Current Product / Version" and "All" radio options. Clicking on the button will clear the history bar as well as the history kept in local storage.
If "All" is selected in the history config menu the checkbox option for "Show product details in the history bar" will be enabled. When checked, the product/version for each historic page will show alongside the page name in the history bar. Hovering the cursor over the page names in the history bar will also show the product/version as a tooltip.
Both API docs and guides can be searched for using the search field at the top of the page.
On API doc pages there is also a filter input field that filters the member rows using the filter string. In addition to filtering by string you can filter the class members by access level, inheritance, and read only. This is done using the checkboxes at the top of the page.
The checkbox at the bottom of the API class navigation tree filters the class list to include or exclude private classes.
Clicking on an empty search field will show your last 10 searches for quick navigation.
Each API doc page (with the exception of Javascript primitives pages) has a menu view of metadata relating to that class. This metadata view will have one or more of the following:
Ext.button.Button class has an alternate class name of Ext.Button). Alternate class
names are commonly maintained for backward compatibility.Runnable examples (Fiddles) are expanded on a page by default. You can collapse and expand example code blocks individually using the arrow on the top-left of the code block. You can also toggle the collapse state of all examples using the toggle button on the top-right of the page. The toggle-all state will be remembered between page loads.
Class members are collapsed on a page by default. You can expand and collapse members using the arrow icon on the left of the member row or globally using the expand / collapse all toggle button top-right.
Viewing the docs on narrower screens or browsers will result in a view optimized for a smaller form factor. The primary differences between the desktop and "mobile" view are:
The class source can be viewed by clicking on the class name at the top of an API doc page. The source for class members can be viewed by clicking on the "view source" link on the right-hand side of the member row.
The Ext namespace (global object) encapsulates all classes, singletons, and utility methods provided by Sencha's libraries.
Most user interface Components are at a lower level of nesting in the namespace, but many common utility functions are provided as direct properties of the Ext namespace.
Also many frequently used methods from other classes are provided as shortcuts within the Ext namespace. For example Ext.getCmp aliases Ext.ComponentManager.get.
Many applications are initiated with Ext.application which is called once the DOM is ready. This ensures all scripts have been loaded, preventing dependency issues. For example:
Ext.application({
name: 'MyApp',
launch: function () {
Ext.Msg.alert(this.name, 'Ready to go!');
}
});
Sencha Cmd is a free tool
for helping you generate and build Ext JS (and Sencha Touch) applications. See
Ext.app.Application for more information about creating an app.
A lower-level technique that does not use the Ext.app.Application architecture is
Ext.onReady.
You can also discuss concepts and issues with others on the Sencha Forums.
This object is used to enable or disable debugging for classes or namespaces. The default instance looks like this:
Ext.debugConfig = {
hooks: {
'*': true
}
};
Typically applications will set this in their "app.json" like so:
{
"debug": {
"hooks": {
// Default for all namespaces:
'*': true,
// Except for Ext namespace which is disabled
'Ext': false,
// Except for Ext.layout namespace which is enabled
'Ext.layout': true
}
}
}
Alternatively, because this property is consumed very early in the load process of
the framework, this can be set in a script tag that is defined prior to loading
the framework itself.
For example, to enable debugging for the Ext.layout namespace only:
var Ext = Ext || {};
Ext.debugConfig = {
hooks: {
//...
}
};
For any class declared, the longest matching namespace specified determines if its
debugHooks will be enabled. The default setting is specified by the '*' property.
NOTE: This option only applies to debug builds. All debugging is disabled in production builds.
Defaults to:
Ext.debugConfig || manifest.debug || {
hooks: {
'*': true
}
}
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.
Defaults to:
manifest
Available since: 5.0.0
A map of event names which contained the lower-cased versions of any mixed case event names.
Defaults to:
{}
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-'
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=='
Stores Fly instances keyed by their assigned or generated name.
Defaults to:
flyweights
Available since: 5.0.0
A zero length string which will pass a truth test. Useful for passing to methods which use a truth test to reject falsy values where a string value must be cleared.
Defaults to:
new String()
This property is provided for backward compatibility with previous versions of Ext JS. Accessibility is always enabled in Ext JS 6.0+.
This property is deprecated. To disable WAI-ARIA compatibility warnings,
override Ext.ariaWarn function in your application startup code:
Ext.application({
launch: function() {
Ext.ariaWarn = Ext.emptyFn;
}
});
For stricter compatibility with WAI-ARIA requirements, replace Ext.ariaWarn
with a function that will raise an error instead:
Ext.application({
launch: function() {
Ext.ariaWarn = function(target, msg) {
Ext.raise({
msg: msg,
component: target
});
};
}
});
Defaults to:
true
Available since: 6.0.0
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
True to automatically purge event listeners during garbageCollection.
Defaults to:
true
An array containing extra enumerables for old browsers
Defaults to:
enumerables
This indicate the start timestamp of current cycle. It is only reliable during dom-event-initiated cycles and Ext.draw.Animator initiated cycles.
Defaults to:
Ext.now()
A reusable identity function that simply returns its first argument.
Defaults to:
identityFn
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)
True if the detected browser uses the Gecko layout engine (e.g. Mozilla, Firefox).
True if the page is running over SSL
Defaults to:
/^https/i.test(window.location.protocol)
true if browser is using strict mode.
Defaults to:
document.compatMode === "CSS1Compat"
Defaults to:
{
//<feature logger>
log: function(message, priority) {
if (message && global.console) {
if (!priority || !(priority in global.console)) {
priority = 'log';
}
message = '[' + priority.toUpperCase() + '] ' + message;
global.console[priority](message);
}
},
verbose: function(message) {
this.log(message, 'verbose');
},
info: function(message) {
this.log(message, 'info');
},
warn: function(message) {
this.log(message, 'warn');
},
error: function(message) {
throw new Error(message);
},
deprecate: function(message) {
this.log(message, 'warn');
}
} || {
//</feature>
verbose: emptyFn,
log: emptyFn,
info: emptyFn,
warn: emptyFn,
error: function(message) {
throw new Error(message);
},
deprecate: emptyFn
}
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'
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
};
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
A reusable empty function for use as privates members.
Ext.define('MyClass', {
nothing: Ext.emptyFn,
privates: {
privateNothing: Ext.privateFn
}
});
Defaults to:
privateFn
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
Defaults to:
(function() {
var cache = {};
return function(origin, delimiter) {
if (!origin) {
return [];
} else if (!delimiter) {
return [
origin
];
}
var replaceRe = cache[delimiter] || (cache[delimiter] = new RegExp('\\\\' + delimiter, 'g')),
result = [],
parts, part;
parts = origin.split(delimiter);
while ((part = parts.shift()) !== undefined) {
// If any of the parts ends with the delimiter that means
// the delimiter was escaped and the split was invalid. Roll back.
while (part.charAt(part.length - 1) === '\\' && parts.length > 0) {
part = part + delimiter + parts.shift();
}
// Now that we have split the parts, unescape the delimiter char
part = part.replace(replaceRe, delimiter);
result.push(part);
}
return result;
};
})()
URL to a blank file used by Ext when in secure mode for iframe src and onReady src
to prevent the IE insecure content warning ('about:blank', except for IE
in secure mode, which is 'javascript:""').
Defaults to:
Ext.isSecure && Ext.isIE ? 'javascript:\'\'' : 'about:blank'
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
Regular expression used for validating identifiers.
Defaults to:
/^[a-z_][a-z0-9\-_]*$/i
Object containing version information for all packages utilized by your application.
For a public getter, please see Ext.getVersion().
Defaults to:
{}
This function registers top-level (root) namespaces. This is needed for "sandbox" builds.
Ext.addRootNamespaces({
MyApp: MyApp,
Common: Common
});
In the above example, MyApp and Common are top-level namespaces that happen
to also be included in the sandbox closure. Something like this:
(function(Ext) {
Ext.sandboxName = 'Ext6';
Ext.isSandboxed = true;
Ext.buildSettings = { baseCSSPrefix: "x6-", scopeResetCSS: true };
var MyApp = MyApp || {};
Ext.addRootNamespaces({ MyApp: MyApp );
... normal app.js goes here ...
})(this.Ext6 || (this.Ext6 = {}));
The sandbox wrapper around the normally built app.js content has to take care
of introducing top-level namespaces as well as call this method.
Available since: 6.0.0
namespaces : Object
Same as Ext.ComponentQuery#query.
selector : String
The selector string to filter returned Components.
root : Ext.Container (optional)
The Container within which to perform the query. If omitted, all Components within the document are included in the search.
This parameter may also be an array of Components to filter according to the selector.
The matched Components.
Loads Ext.app.Application class and starts it up with given configuration after the page is ready.
See Ext.app.Application for details.
config : Object/String
Application config object or name of a class derived from Ext.app.Application.
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.
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.
Copies all the properties of config to object if they don't already exist.
object : Object
The receiver of the properties
config : Object
The source of the properties
returns obj
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.
fn : Function
Callback function.
scope : Object (optional)
The scope for the callback (this pointer).
parameters : Mixed[] (optional)
Additional parameters to pass to fn.
A cancelation id for Ext#asapCancel.
Cancels a previously scheduled call to Ext#asap.
var asapId = Ext.asap(me.method, me);
...
if (nevermind) {
Ext.apasCancel(asapId);
}
id : Number
The id returned by Ext#asap.
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.
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.
The new function.
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);
callback : Function/String
The callback function to execute or the name of
the callback method on the provided scope.
scope : Object (optional)
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
The value returned by the callback or undefined (if there is a delay
or if the callback is not a function).
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.
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:
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.
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);
// 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 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.
This methods primary use is in support of conditional overrides on an
Ext.define declaration.
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
True if specs matches the registered package versions.
Old alias to Ext.Array#clean Filter through an array and remove empty item as defined in Ext.isEmpty.
See Ext.Array#filter
array : Array
results
Deprecated since version 4.0.0
Use Ext.Array#clean instead
Clone simple variables including array, {}-like objects, DOM nodes and Date without keeping the old reference. A reference for the object itself is returned if it's not a direct descendant of Object. For model cloning, see Model.copy.
item : Object
The variable to clone
cloneDom : Boolean (optional)
true to clone DOM nodes.
Defaults to: true
clone
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.
from : Mixed
The value to coerce
to : Mixed
The value it must be compared against
The coerced value.
This method converts an object containing config objects keyed by itemId into
an array of config objects.
Available since: 6.5.0
items : Object
An object containing config objects keyed by itemId.
defaultProperty : String (optional)
The property to set for string items.
Defaults to: "xtype"
Copies a set of named properties fom the source object to the destination object.
Example:
var foo = { a: 1, b: 2, c: 3 };
var bar = Ext.copy({}, foo, 'a,c');
// bar = { a: 1, c: 3 };
Important note: To borrow class prototype methods, use Ext.Base#borrow instead.
dest : Object
The destination object.
source : Object
The source object.
names : String/String[]
Either an Array of property names, or a comma-delimited list of property names to copy.
usePrototypeKeys : Boolean (optional)
Pass true to copy keys off of the
prototype as well as the instance.
Defaults to: false
The dest object.
Copies a set of named properties fom the source object to the destination object if the destination object does not already have them.
Example:
var foo = { a: 1, b: 2, c: 3 };
var bar = Ext.copyIf({ a:42 }, foo, 'a,c');
// bar = { a: 42, c: 3 };
destination : Object
The destination object.
source : Object
The source object.
names : String/String[]
Either an Array of property names, or a single string with a list of property names separated by ",", ";" or spaces.
The dest 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.
dest : Object
The destination object.
source : Object
The source object.
names : String/String[]
Either an Array of property names, or a comma-delimited list of property names to copy.
usePrototypeKeys : Boolean (optional)
Pass true to copy keys off of the
prototype as well as the instance.
Defaults to: false
The dest object.
Deprecated since version 6.0.1
Use Ext.copy instead. This old method
would copy the named preoperties even if they did not exist in the source which
could produce `undefined` values in the destination.
Copies a set of named properties fom the source object to the destination object if the destination object does not already have them.
Example:
var foo = { a: 1, b: 2, c: 3 };
var bar = Ext.copyToIf({ a:42 }, foo, 'a,c');
// bar = { a: 42, c: 3 };
destination : Object
The destination object.
source : Object
The source object.
names : String/String[]
Either an Array of property names, or a single string with a list of property names separated by ",", ";" or spaces.
The dest object.
Deprecated since version 6.0.1
Use Ext.copyIf instead. This old method
would copy the named preoperties even if they did not exist in the source which
could produce `undefined` values in the destination.
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,
...
});
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.
instance
Instantiate a class by its alias. This is usually invoked by the shorthand Ext#createByAlias.
If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.
var window = Ext.createByAlias('widget.window', { width: 600, height: 800 });
alias : String
args : Object...
Additional arguments after the alias will be passed to the class constructor.
instance
Shorthand for Ext.JSON#decode Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError unless the safe option is set.
json : String
The JSON string.
safe : Boolean (optional)
true to return null, otherwise throw an exception
if the JSON is invalid.
Defaults to: false
The resulting object.
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
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
The timeout id that can be used with clearTimeout.
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.
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:
null to create an anonymous class.data : Object
The key - value pairs of properties to apply to this class. Property names can be of any valid strings, except those in the reserved listed below:
createdFn : Function (optional)
Callback to execute after the class is created, the execution scope of which
(this) will be the newly created class itself.
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;
...
});
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
Create a function that will throw an error if called (in debug mode) with a message that indicates the method has been removed.
suggestion : String
Optional text to include in the message (a workaround perhaps).
The generated function.
Destroys all of the given objects. If arrays are passed, the elements of these are destroyed recursively.
What it means to "destroy" an object depends on the type of object.
Array: Each element of the array is destroyed recursively.Object: Any object with a destroy method will have that method called.args : Mixed...
Any number of objects or arrays.
Destroys the specified named members of the given object using Ext.destroy. These
properties will be set to null.
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.
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
iterable : Array/NodeList/Object
The value to be iterated. If this argument is not iterable, the callback function is called once.
fn : Function
The callback function. If it returns false, the iteration
stops and this method returns the current index. Returning undefined (i.e
return;) will only exit the callback function and proceed with the next iteration
in the loop.
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
See description for the fn parameter.
Shorthand for Ext.JSON#encode Encodes an Object, Array or other value.
If the environment's native JSON encoding is not being used (Ext#USE_NATIVE_JSON is not set,
or the environment does not support it), then ExtJS's encoding will be used. This allows the developer
to add a toJSON method to their classes which need serializing to return a valid JSON representation
of the object.
o : Object
The variable to encode.
The JSON string.
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.*');
excludes : String/String[]
Contains exclude, require and syncRequire methods for chaining.
This method deprecated. Use Ext.define instead.
superclass : Function
overrides : Object
The subclass constructor from the overrides parameter, or a generated one if not provided.
Deprecated since version 4.0.0
Use Ext.define instead
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
config : Object
The config object to instantiate or update an instance with.
classReference : String (optional)
The class to instantiate from (if there is a default).
instance : Object (optional)
The instance to update.
aliasNamespace : Object (optional)
Deprecated since version 6.5.0
Use the update method of the
associated factory instead.
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
eventName : String
The name of the event to fire.
args : Object...
Variable number of parameters are passed to handlers.
returns false if any of the handlers return false otherwise it returns true.
Returns the first match to the given component query. See Ext.ComponentQuery#query.
selector : String
The selector string to filter returned Component.
root : Ext.Container (optional)
The Container within which to perform the query. If omitted, all Components within the document are included in the search.
This parameter may also be an array of Components to filter according to the selector.
The first matched Component or null.
Old alias to Ext.Array#flatten Recursively flattens into 1-d Array. Injects Arrays inline.
array : Array
The array to flatten
The 1-d array.
Deprecated since version 4.0.0
Use Ext.Array#flatten instead
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.
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").
The shared Element object (or null if no matching
element was found).
Returns the current document body as an Ext.dom.Element.
The document body.
Get the class of the provided object; returns null if it's not an instance of any class created with Ext.define. This is usually invoked by the shorthand Ext#getClass.
var component = new Ext.Component();
Ext.getClass(component); // returns Ext.Component
object : Object
class
Get the name of the class by its reference or its instance. This is usually invoked by the shorthand Ext#getClassName.
Ext.ClassManager.getName(Ext.Action); // returns "Ext.Action"
object : Ext.Class/Object
className
This is shorthand reference to Ext.ComponentManager#get. Looks up an existing Ext.Component by id
id : String
The component id
The Component, undefined if not found, or null if a
Class was found.
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
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 collected as detached Dom trees.
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.
The document.
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.
el : String/HTMLElement/Ext.dom.Element
This method returns, or creates on demand the global floatParent element into which top level floated components are inserted.
The global floatRoot element.
Returns the current document head as an Ext.dom.Element.
The document head.
className : String
Namespace prefix if it's known, otherwise undefined
Returns the size of the browser scrollbars. This can differ depending on operating system settings, such as the theme or font size.
force : Boolean (optional)
true to force a recalculation of the value.
An object containing scrollbar sizes.
Shortcut to Ext.data.StoreManager#lookup. Gets a registered Store by id
name : Object
Generate a unique reference of Ext in the global scope, useful for sandboxing
Get the version number of the supplied package name; will return the version of the framework.
packageName : String (optional)
The package name, e.g., 'core', 'touch', 'ext'.
The version.
Retrieves the viewport height of the window.
Available since: 6.5.0
viewportHeight
Retrieves the viewport width of the window.
Available since: 6.5.0
viewportWidth
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.
The window.
Convert certain characters (&, <, >, ', and ") from their HTML character equivalents.
value : String
The string to decode.
The decoded text.
Convert certain characters (&, <, >, ', and ") to their HTML character equivalents for literal display in web pages.
value : String
The string to encode.
The encoded text.
Generates unique ids. If the object/element is passes and it already has an id, it is unchanged.
o : Object (optional)
The object to generate an id for.
The generated id.
Generates unique ids. If the element already has an id, it is unchanged
obj : Object/HTMLElement/Ext.dom.Element (optional)
The element to generate an id for
prefix : String (optional)
Id prefix (defaults "ext-gen")
The generated Id.
Calls this function repeatedly at a given interval, optionally in a specific scope.
Ext.defer is alias for Ext.Function.defer
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
The interval id that can be used with clearInterval.
Returns true if the passed value is a JavaScript Array, false otherwise.
target : Object
The target to test.
Returns true if the passed value is a boolean.
value : Object
The value to test.
Returns true if the passed value is a JavaScript Date object, false otherwise.
object : Object
The object to test.
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.
className : String
The name of the class.
true if debug is enabled for the specified class.
Returns true if the passed value is defined.
value : Object
The value to test.
Returns true if the passed value is an HTMLElement
value : Object
The value to test.
Returns true if the passed value is empty, false otherwise. The value is deemed to be empty if it is either:
nullundefinedallowEmptyString parameter is set to true)value : Object
The value to test.
allowEmptyString : Boolean (optional)
true to allow empty strings.
Defaults to: false
Returns true if the passed value is a JavaScript Function, false otherwise.
value : Object
The value to test.
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.
value : Object
The value to test
Returns 'true' if the passed value is a String that matches the MS Date JSON encoding format.
value : String
The string to test.
Returns true if the passed value is a number. Returns false for non-finite numbers.
value : Object
The value to test.
Validates that a value is numeric.
value : Object
Examples: 1, '1', '2.34'
True if numeric, false otherwise
Returns true if the passed value is a JavaScript Object, false otherwise.
value : Object
The value to test.
Returns true if the passed value is a JavaScript 'primitive', a string, number
or boolean.
value : Object
The value to test.
Returns trueif the passed value is a string.
value : Object
The value to test.
Returns true if the passed value is a TextNode
value : Object
The value to test.
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.
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.
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.
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'). 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.
id : String
Old alias to Ext.Array#max Returns the maximum value in the Array.
array : Array/NodeList
The Array from which to select the maximum value.
comparisonFn : Function (optional)
a function to perform the comparison which determines maximization. If omitted the ">" operator will be used. Note: gt = 1; eq = 0; lt = -1
max : Mixed
Current maximum value.
item : Mixed
The value to compare with the current maximum.
maxValue The maximum value.
Deprecated since version 4.0.0
Use Ext.Array#max instead
Old alias to Ext.Array#mean Calculates the mean of all items in the array.
array : Array
The Array to calculate the mean value of.
The mean.
Deprecated since version 4.0.0
Use Ext.Array#mean instead
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
}
}
destination : Object
The object into which all subsequent objects are merged.
object : Object...
Any number of objects to merge into the destination.
merged The destination object with all passed objects merged in.
Old alias to Ext.Array#min Returns the minimum value in the Array.
array : Array/NodeList
The Array from which to select the minimum value.
comparisonFn : Function (optional)
a function to perform the comparison which determines minimization. If omitted the "<" operator will be used. Note: gt = 1; eq = 0; lt = -1
min : Mixed
Current minimum value.
item : Mixed
The value to compare with the current minimum.
minValue The minimum value.
Deprecated since version 4.0.0
Use Ext.Array#min instead
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) { ... };
namespaces : String...
The (last) namespace object created.
Convenient alias for Ext.namespace. Creates namespaces to be used for scoping variables and classes so that they are not global. Specifying the last node of a namespace implicitly creates all other nodes. Usage:
Ext.namespace('Company', 'Company.data');
// equivalent and preferable to the above syntax
Ext.ns('Company.data');
Company.Widget = function() { ... };
Company.data.CustomStore = function(config) { ... };
namespaces : String...
The (last) namespace object created.
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
value : Object
defaultValue : Number
The value to return if the original value is non-numeric
value, if numeric, defaultValue otherwise
Deprecated since version 4.0.0
Please use Ext.Number#from instead.
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}
});
eventName : String/Object
The name of the event to listen for. May also be an object who's property names are event names.
fn : Function/String (optional)
The method the event invokes or the name of
the method within the specified scope. Will be called with arguments
given to Ext.util.Observable#fireEvent plus the options parameter described
below.
scope : Object (optional)
The scope (this reference) in which the handler function is
executed. If omitted, defaults to the object which fired the event.
options : Object (optional)
An object containing handler configuration.
Note: The options object will also be passed as the last argument to every event handler.
This object may contain any of the following properties:
scope : Object
The scope (this reference) in which the handler function is executed. If omitted,
defaults to the object which fired the event.
delay : Number
The number of milliseconds to delay the invocation of the handler after the event fires.
single : Boolean
True to add a handler to handle just the next firing of the event, and then remove itself.
buffer : Number
Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.
onFrame : Number
Causes the handler to be scheduled to run at the next animation frame event. If the event fires again before that time, the handler is not rescheduled - the handler will only be called once when the next animation frame is fired, with the last set of arguments passed.
target : Ext.util.Observable
Only call the handler if the event was fired on the target Observable, not if the event was bubbled up from a child Observable.
element : String
This option is only valid for listeners bound to Ext.Component. The name of a Component property which references an Ext.dom.Element to add a listener to.
This option is useful during Component construction to add DOM event listeners to elements of Ext.Component which will exist only after the Component is rendered.
For example, to add a click listener to a Panel's body:
var panel = new Ext.panel.Panel({
title: 'The title',
listeners: {
click: this.handlePanelClick,
element: 'body'
}
});
In order to remove listeners attached using the element, you'll need to reference the element itself as seen below.
panel.body.un(...)
delegate : String (optional)
A simple selector to filter the event target or look for a descendant of the target.
The "delegate" option is only available on Ext.dom.Element instances (or when attaching a listener to a Ext.dom.Element via a Component using the element option).
See the delegate example below.
capture : Boolean (optional)
When set to true, the listener is fired in the capture phase of the event propagation
sequence, instead of the default bubble phase.
The capture option is only available on Ext.dom.Element instances (or
when attaching a listener to a Ext.dom.Element via a Component using the
element option).
stopPropagation : Boolean (optional)
This option is only valid for listeners bound to Ext.dom.Element.
true to call stopPropagation on the event object
before firing the handler.
preventDefault : Boolean (optional)
This option is only valid for listeners bound to Ext.dom.Element.
true to call preventDefault on the event object
before firing the handler.
stopEvent : Boolean (optional)
This option is only valid for listeners bound to Ext.dom.Element.
true to call stopEvent on the event object
before firing the handler.
args : Array (optional)
Optional set of arguments to pass to the handler function before the actual
fired event arguments. For example, if args is set to ['foo', 42],
the event handler function will be called with an arguments list like this:
handler('foo', 42, <actual event arguments>...);
destroyable : Boolean (optional)
When specified as true, the function returns a destroyable object. An object
which implements the destroy method which removes all listeners added in this call.
This syntax can be a helpful shortcut to using un; particularly when
removing multiple listeners. NOTE - not compatible when using the element
option. See un for the proper syntax for removing listeners added using the
element config.
Defaults to:
false
priority : Number (optional)
An optional numeric priority that determines the order in which event handlers are run. Event handlers with no priority will be run as if they had a priority of 0. Handlers with a higher priority will be prioritized to run sooner than those with a lower priority. Negative numbers can be used to set a priority lower than the default. Internally, the framework uses a range of 1000 or greater, and -1000 or lesser for handlers that are intended to run before or after all others, so it is recommended to stay within the range of -999 to 999 when setting the priority of event handlers in application-level code. A priority must be an integer to be valid. Fractional values are reserved for internal framework use.
order : String (optional)
A legacy option that is provided for backward compatibility.
It is recommended to use the priority option instead. Available options are:
'before': equal to a priority of 100'current': equal to a priority of 0 or default priority'after': equal to a priority of -100Defaults to:
'current'
order : String (optional)
A shortcut for the order event option. Provided for backward compatibility.
Please use the priority event option instead.
Combining Options
Using the options argument, it is possible to combine different types of listeners:
A delayed, one-time listener.
myPanel.on('hide', this.handleClick, this, {
single: true,
delay: 100
});
Attaching multiple handlers in 1 call
The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers and handler configs.
grid.on({
itemclick: 'onItemClick',
itemcontextmenu: grid.onItemContextmenu,
destroy: {
fn: function () {
// function called within the 'altCmp' scope instead of grid
},
scope: altCmp // unique scope for the destroy handler
},
scope: grid // default scope - provided for example clarity
});
Delegate
This is a configuration option that you can pass along when registering a handler for an event to assist with event delegation. By setting this configuration option to a simple selector, the target element will be filtered to look for a descendant of the target. For example:
var panel = Ext.create({
xtype: 'panel',
renderTo: document.body,
title: 'Delegate Handler Example',
frame: true,
height: 220,
width: 220,
html: '<h1 class="myTitle">BODY TITLE</h1>Body content'
});
// The click handler will only be called when the click occurs on the
// delegate: h1.myTitle ("h1" tag with class "myTitle")
panel.on({
click: function (e) {
console.log(e.getTarget().innerHTML);
},
element: 'body',
delegate: 'h1.myTitle'
});
Defaults to: 'current'
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();
Adds a listener to be notified when the document is ready (before onload and before images are loaded).
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.
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
Adds a listener to be notified when the document is ready (before onload and before images are loaded).
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.
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
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.
target : Object
The target to override.
overrides : Object
The properties to add or replace on target.
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
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.
The new callback function.
Old alias to Ext.Array.pluck Plucks the value of a property from each item in the Array. Example:
Ext.Array.pluck(Ext.query("p"), "className"); // [el1.className, el2.className, ..., elN.className]
array : Array/NodeList
The Array of items to pluck the value from.
propertyName : String
The property name to pluck from each element.
The value from each item in the Array.
Deprecated since version 4.0.0
Use Ext.Array.pluck instead
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.
The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.
selector : String
The CSS selector.
asDom : Boolean (optional)
false to return an array of Ext.dom.Element
Defaults to: true
An Array of elements ( HTMLElement or Ext.dom.Element if asDom is false) that match the selector. If there are no matches, an empty Array is returned.
Raise 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
});
}
}
});
err : String/Object
The error message string, or an object containing the attribute "msg" that will be used as the error message. Any other data included in the object will also be logged to the browser console, if available.
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
});
id : String/Object
The id to set on the new store, or the config object
that contains the storeId property.
config : Object
The store config if the first parameter (id) is just the
id.
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.
node : HTMLElement
The node to remove
Loads all classes by the given names and all their direct dependencies; optionally executes the given callback function when finishes, within the optional scope.
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.
Resolves a resource URL that may contain a resource pool identifier token at the front. The tokens are formatted as HTML tags "<poolName@packageName>" followed by a normal relative path. This token is only processed if present at the first character of the given string.
These tokens are parsed and the pieces are then passed to the Ext#getResourcePath method.
For example:
[{
xtype: 'image',
src: '<shared>images/foo.png'
},{
xtype: 'image',
src: '<@package>images/foo.png'
},{
xtype: 'image',
src: '<shared@package>images/foo.png'
}]
In the above example, "shared" is the name of a Sencha Cmd resource pool and "package" is the name of a Sencha Cmd package.
Available since: 6.0.1
url : String
The URL that may contain a resource pool token at the front.
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.
o : Object
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.
selector : String/HTMLElement[]
The CSS selector or an array of elements
composite : Boolean
Return a CompositeElement as opposed to a CompositeElementLite. Defaults to false.
Set the compatibility level (a version number) for the given package name.
Available since: 5.0.0
packageName : String
The package name, e.g. 'core', 'touch', 'ext'.
version : String/Ext.Version
The version, e.g. '4.2'.
Set version number for the given package name.
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'.
Old alias to Ext.Array#sum Calculates the sum of all items in the given array.
array : Array
The Array to calculate the sum value of.
The sum.
Deprecated since version 4.0.0
Use Ext.Array#sum instead
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.
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.
Returns the current high-resolution timestamp.
Available since: 6.0.1
Milliseconds ellapsed since arbitrary epoch.
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
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 the type of the given variable in string format. List of possible values are:
undefined: If the given value is undefinednull: If the given value is nullstring: If the given value is a stringnumber: If the given value is a numberboolean: If the given value is a boolean valuedate: If the given value is a Date objectfunction: If the given value is a function referenceobject: If the given value is an objectarray: If the given value is an arrayregexp: If the given value is a regular expressionelement: If the given value is a DOM Elementtextnode: If the given value is a DOM text node and contains something other than whitespacewhitespace: If the given value is a DOM text node and contains only whitespacevalue : Object
Shorthand for Ext.GlobalEvents#removeListener. Removes an event handler.
eventName : String
The type of event the handler was associated with.
fn : Function
The handler to remove. This must be a reference to the function passed into the addListener call.
scope : Object (optional)
The scope originally specified for the handler. It must be the same as the scope argument specified in the original call to Ext.util.Observable#addListener or the listener will not be removed.
Convenience Syntax
You can use the addListener
destroyable: true config option in place of calling un(). For example:
var listeners = cmp.on({
scope: cmp,
afterrender: cmp.onAfterrender,
beforehide: cmp.onBeforeHide,
destroyable: true
});
// Remove listeners
listeners.destroy();
// or
cmp.un(
scope: cmp,
afterrender: cmp.onAfterrender,
beforehide: cmp.onBeforeHide
);
Exception - DOM event handlers using the element config option
You must go directly through the element to detach an event handler attached using the addListener element option.
panel.on({
element: 'body',
click: 'onBodyCLick'
});
panel.body.un({
click: 'onBodyCLick'
});
Old alias to Ext.Array#unique Returns a new array with unique items.
array : Array
results
Deprecated since version 4.0.0
Use Ext.Array#unique instead
Appends content to the query string of a URL, handling logic for whether to place a question mark or ampersand.
url : String
The URL to append to.
string : String
The content to append to the URL.
The resulting URL
Alias for Ext.Object#fromQueryString. Converts a query string back into an object.
Non-recursive:
Ext.Object.fromQueryString("foo=1&bar=2"); // returns {foo: '1', bar: '2'}
Ext.Object.fromQueryString("foo=&bar=2"); // returns {foo: '', bar: '2'}
Ext.Object.fromQueryString("some%20price=%24300"); // returns {'some price': '$300'}
Ext.Object.fromQueryString("colors=red&colors=green&colors=blue"); // returns {colors: ['red', 'green', 'blue']}
Recursive:
Ext.Object.fromQueryString(
"username=Jacky&"+
"dateOfBirth[day]=1&dateOfBirth[month]=2&dateOfBirth[year]=1911&"+
"hobbies[0]=coding&hobbies[1]=eating&hobbies[2]=sleeping&"+
"hobbies[3][0]=nested&hobbies[3][1]=stuff", true);
// returns
{
username: 'Jacky',
dateOfBirth: {
day: '1',
month: '2',
year: '1911'
},
hobbies: ['coding', 'eating', 'sleeping', ['nested', 'stuff']]
}
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
Deprecated since version 4.0.0
Use Ext.Object#fromQueryString instead
Takes an object and converts it to an encoded query string.
Non-recursive:
Ext.Object.toQueryString({foo: 1, bar: 2}); // returns "foo=1&bar=2"
Ext.Object.toQueryString({foo: null, bar: 2}); // returns "foo=&bar=2"
Ext.Object.toQueryString({'some price': '$300'}); // returns "some%20price=%24300"
Ext.Object.toQueryString({date: new Date(2011, 0, 1)}); // returns "date=%222011-01-01T00%3A00%3A00%22"
Ext.Object.toQueryString({colors: ['red', 'green', 'blue']}); // returns "colors=red&colors=green&colors=blue"
Recursive:
Ext.Object.toQueryString({
username: 'Jacky',
dateOfBirth: {
day: 1,
month: 2,
year: 1911
},
hobbies: ['coding', 'eating', 'sleeping', ['nested', 'stuff']]
}, true); // returns the following string (broken down and url-decoded for ease of reading purpose):
// username=Jacky
// &dateOfBirth[day]=1&dateOfBirth[month]=2&dateOfBirth[year]=1911
// &hobbies[0]=coding&hobbies[1]=eating&hobbies[2]=sleeping&hobbies[3][0]=nested&hobbies[3][1]=stuff
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
queryString
Deprecated since version 4.0.0
Use Ext.Object#toQueryString instead
Returns the given value itself if it's not empty, as described in Ext#isEmpty; returns the default value (second argument) otherwise.
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
value, if non-empty, else defaultValue.
Comparison function for sorting an array of objects in ascending order of weight.
Available since: 6.5.0
lhs : Object
rhs : 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.
name : String (optional)
The xtype of the widget to create.
config : Object (optional)
The configuration object for the widget constructor.
The widget instance
Ext JS | Terms of Use