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.onReady which is called once the DOM is ready. This ensures all scripts have been loaded, preventing dependency issues. For example
Ext.onReady(function(){
new Ext.Component({
renderTo: document.body,
html: 'DOM ready!'
});
});
For more information about how to use the Ext classes, see
The Learning Center The FAQ The forums
URL to a 1x1 transparent gif image used by Ext to create inline icons with CSS background images. In older versions of IE, this defaults to "http://sencha.com/s.gif" and you should change this to a URL on your server. For other browsers it uses an inline data URL.
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. 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)
True if the Ext.fx.Anim Class is available
True if the Ext.fx.Anim Class is available
True to automatically uncache orphaned Ext.core.Elements periodically (defaults to true)
True to automatically uncache orphaned Ext.core.Elements periodically (defaults to true)
True to automatically purge event listeners during garbageCollection (defaults to true).
True to automatically purge event listeners during garbageCollection (defaults to true).
EXPERIMENTAL - True to cascade listener removal to child elements when an element is removed. Currently not optimized for performance.
An array containing extra enumerables for old browsers
An array containing extra enumerables for old browsers
Returns true if the passed value is a JavaScript Array, false otherwise.
Returns true if the passed value is a JavaScript Array, false otherwise.
Returns true if the passed value is a JavaScript Function, false otherwise.
Returns true if the passed value is a JavaScript Function, false otherwise.
True if the detected browser uses the Gecko layout engine (e.g. Mozilla, Firefox).
True if the detected browser uses the Gecko layout engine (e.g. Mozilla, Firefox).
True if the detected browser uses a Gecko 1.9+ layout engine (e.g. Firefox 3.x).
True if the detected browser uses a Gecko 1.9+ layout engine (e.g. Firefox 3.x).
True if the detected browser uses a Gecko 2.0+ layout engine (e.g. Firefox 4.x).
True if the detected browser uses a Gecko 2.0+ layout engine (e.g. Firefox 4.x).
True if the detected browser is Internet Explorer.
True if the detected browser is Internet Explorer.
True if the detected browser is Internet Explorer 6.x.
True if the detected browser is Internet Explorer 6.x.
True if the detected browser is Internet Explorer 7.x.
True if the detected browser is Internet Explorer 7.x.
True if the detected browser is Internet Explorer 8.x.
True if the detected browser is Internet Explorer 8.x.
True if the detected browser is Internet Explorer 9.x.
True if the detected browser is Internet Explorer 9.x.
Returns true if the passed value is a JavaScript Object, false otherwise.
Returns true if the passed value is a JavaScript Object, false otherwise.
True when the document is fully initialized and ready for action
True when the document is fully initialized and ready for action
Removes a DOM node from the document.
Removes this element from the document, removes all DOM event listeners, and deletes the cache reference.
All DOM event listeners are removed from this element. If Ext.enableNestedListenerRemoval is
true, then DOM event listeners are also removed from all child nodes. The body node
will be ignored if passed in.
True to scope the reset CSS to be just applied to Ext components. Note that this wraps root containers with an additional element. Also remember that when you turn on this option, you have to use ext-all-scoped { unless you use the bootstrap.js to load your javascript, in which case it will be handled for you.
Applies event listeners to elements by selectors when the document is ready. The event name is specified with an @ suffix.
Ext.addBehaviors({
// add a listener for click on all anchors in element with id foo
'#foo a@click' : function(e, t){
// do something
},
// add the same listener to multiple selectors (separated by comma BEFORE the @)
'#foo a, #bar span.some-class@mouseover' : function(){
// do something
}
});
The list of behaviors to apply
Copies all the properties of config to the specified object. Note that if recursive merging and cloning without referencing the original objects / arrays is needed, use Ext.Object.merge instead.
The receiver of the properties
The source of the properties
A different object that will also be applied for default values
returns obj
Copies all the properties of config to object if they don't already exist. @function
Copies all the properties of config to object if they don't already exist. @function
The receiver of the properties
The source of the properties
returns obj
Execute a callback function in a particular scope. If no function is passed the call is ignored.
Execute a callback function in a particular scope. If no function is passed the call is ignored.
The callback to execute
(optional) The scope to execute in
(optional) The arguments to pass to the function
(optional) Pass a number to delay the call by a number of milliseconds.
Old alias to Ext.Array.clean @deprecated 4.0.0 Use Ext.Array.clean instead
Clone almost any type of variable including array, object, DOM nodes and Date without keeping the old reference
Clone almost any type of variable including array, object, DOM nodes and Date without keeping the old reference
The variable to clone
clone
Copies a set of named properties fom the source object to the destination object.
example:
ImageComponent = Ext.extend(Ext.Component, {
initComponent: function() {
this.autoEl = { tag: 'img' };
MyComponent.superclass.initComponent.apply(this, arguments);
this.initialBox = Ext.copyTo({}, this.initialConfig, 'x,y,width,height');
}
});
The destination object.
The source object.
Either an Array of property names, or a comma-delimited list of property names to copy.
(Optional) Defaults to false. Pass true to copy keys off of the prototype as well as the instance.
The modified object.
Convenient shorthand, see Ext.ClassManager.instantiate
Convenient shorthand, see Ext.ClassManager.instantiateByAlias
Shorthand for Ext.JSON.decode
Shorthand for Ext.JSON.decode
The JSON string
(optional) Whether to return null or throw an exception if the JSON is invalid.
The resulting object
Convenient shorthand for Ext.ClassManager.create, see detailed explanation
Attempts to destroy any objects passed to it by removing all event listeners, removing them from the DOM (if applicable) and calling their destroy functions (if available). This method is primarily intended for arguments of type Ext.core.Element and Ext.Component, but any subclass of Ext.util.Observable can be passed in. Any number of elements and/or components can be passed into this function in a single call as separate arguments.
An Ext.core.Element, Ext.Component, or an Array of either of these to destroy
(optional)
... (optional)
Attempts to destroy and then remove a set of named properties of the passed object.
Attempts to destroy and then remove a set of named properties of the passed object.
The object (most likely a Component) who's properties you wish to destroy.
The name of the property to destroy and remove from the object.
... More property names to destroy and remove.
Shorthand for Ext.JSON.encode
Shorthand for Ext.JSON.encode
The variable to encode
The JSON string
Escapes the passed string for use in a regular expression
Escapes the passed string for use in a regular expression
@deprecated 4.0.0 Use Ext.String.escapeRegex instead
Convenient shortcut to Ext.Loader.exclude
This method deprecated. Use Ext.define instead. @function
This method deprecated. Use Ext.define instead. @function
The subclass constructor from the overrides parameter, or a generated one if not provided. @deprecated 4.0.0 Use Ext.define instead
Old alias to Ext.Array.flatten @deprecated 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. Shorthand of Ext.core.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.core.Element class.
The dom node or id
(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)
Retrieves Ext.core.Element objects.
This method does not retrieve Components. This method retrieves Ext.core.Element objects which encapsulate DOM elements. To retrieve a Component by its ID, use Ext.ComponentManager.get.
Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with the same id via AJAX or DOM.
Shorthand of Ext.core.Element.get
The id of the node, a DOM Node or an existing Element.
The Element object (or null if no matching element was found)
Returns the current document body as an Ext.core.Element.
Returns the current document body as an Ext.core.Element.
Ext.core.Element The document body
Convenient shorthand, see Ext.ClassManager.getClass
This is shorthand reference to Ext.ComponentManager.get. Looks up an existing Component by id
This is shorthand reference to Ext.ComponentManager.get. Looks up an existing Component by id
The component id
Ext.Component The Component, undefined if not found, or null if a Class was found.
Returns the current HTML document object as an Ext.core.Element.
Returns the current HTML document object as an Ext.core.Element.
Ext.core.Element The document
Return the dom node for the passed String (id), dom node, or Ext.core.Element. Optional 'strict' flag is needed for IE since it can return 'name' and 'id' elements by using getElementById. 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.core.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.
HTMLElement
Returns the current document head as an Ext.core.Element.
Returns the current document head as an Ext.core.Element.
Ext.core.Element The document head
Returns the current orientation of the mobile device
Returns the current orientation of the mobile device
Either 'portrait' or 'landscape'
Utility method for getting the width of the browser scrollbar. This can differ depending on operating system settings, such as the theme or font size.
(optional) true to force a recalculation of the value.
The width of the scrollbar.
Convert certain characters (&, <, >, and ') from their HTML character equivalents.
Convert certain characters (&, <, >, and ') from their HTML character equivalents.
The string to decode
The decoded text
Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages.
The string to encode
The encoded text
Generates unique ids. If the element already has an id, it is unchanged
Generates unique ids. If the element already has an id, it is unchanged
(optional) The element to generate an id for
(optional) Id prefix (defaults "ext-gen")
The generated Id.
Invokes a method on each item in an Array.
// Example:
Ext.invoke(Ext.query("p"), "getAttribute", "id");
// [el1.getAttribute("id"), el2.getAttribute("id"), ..., elN.getAttribute("id")]
The Array of items to invoke the method on.
The method name to invoke.
Arguments to send into the method invocation.
The results of invoking the method on each item in the array. @deprecated 4.0.0 Will be removed in the next major version
Returns true if the passed value is a boolean.
Returns true if the passed value is a boolean.
The value to test
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.
The object to test
Returns true if the passed value is defined.
Returns true if the passed value is defined.
The value to test
Returns true if the passed value is an HTMLElement
Returns true if the passed value is an HTMLElement
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)The value to test
(optional) true to allow empty strings (defaults to false)
Returns true if the passed value is iterable, false otherwise
Returns true if the passed value is iterable, false otherwise
The value to test
Returns true if the passed value is a number. Returns false for non-finite numbers.
Returns true if the passed value is a number. Returns false for non-finite numbers.
The value to test
Validates that a value is numeric.
Validates that a value is numeric.
Examples: 1, '1', '2.34'
True if numeric, false otherwise
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.
The value to test
Returns true if the passed value is a string.
Returns true if the passed value is a string.
The value to test
Returns true if the passed value is a TextNode
Returns true if the passed value is a TextNode
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.
The object or array to be iterated.
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.
(Optional) The scope (this reference) in which the specified function is executed.
Defaults to the object being iterated itself.
Old alias to Ext.Array.max @deprecated 4.0.0 Use Ext.Array.max instead
Old alias to Ext.Array.mean @deprecated 4.0.0 Use Ext.Array.mean instead
A convenient alias method for Ext.Object.merge
Old alias to Ext.Array.min @deprecated 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.namespace('Company.data');
Company.Widget = function() { ... };
Company.data.CustomStore = function(config) { ... };
The namespace object. (If multiple arguments are passed, this will be the last namespace created) @function
This method is deprecated, please use Ext.Number.from instead
@deprecated 4.0.0 Replaced by Ext.Number.from
This method is deprecated, please use Ext.Number.from instead
@deprecated 4.0.0 Replaced by Ext.Number.from
Alias for Ext.EventManager.onDocumentReady
Alias for Ext.Loader.onReady with withDomReady set to true
Alias for Ext.Loader.onReady with withDomReady set to true
Proxy to Ext.Base.override. Please refer Ext.Base.override for further details.
Ext.define('My.cool.Class', {
sayHi: function() {
alert('Hi!');
}
}
Ext.override(My.cool.Class, {
sayHi: function() {
alert('About to say...');
this.callOverridden();
}
});
var cool = new My.cool.Class();
cool.sayHi(); // alerts 'About to say...'
// alerts 'Hi!'
Please note that this.callOverridden() only works if the class was previously
created with {@link Ext#define)
The class to override
The list of functions to add to origClass. This should be specified as an object literal containing one or more methods.
Partitions the set into two sets: a true set and a false set. Example: Example2:
// Example 1:
Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]]
// Example 2:
Ext.partition(
Ext.query("p"),
function(val){
return val.className == "class1"
}
);
// true are those paragraph elements with a className of "class1",
// false set are those that do not have that className.
The array to partition
(optional) a function to determine truth. If this is omitted the element
itself must be able to be evaluated for its truthfulness.
[true
Old alias to Ext.Array.pluck @deprecated 4.0.0 Use Ext.Array.pluck instead
Shorthand for Ext.PluginManager.registerType
Shorthand for Ext.PluginManager.registerType
The ptype mnemonic string by which the Plugin class may be looked up.
The new Plugin class.
Selects an array of DOM nodes by CSS/XPath selector. Shorthand of Ext.DomQuery.select
Selects an array of DOM nodes by CSS/XPath selector. Shorthand of Ext.DomQuery.select
The selector/xpath query
(optional) The start of the query (defaults to document).
Creates a new Model class from the specified config object. See Ext.data.Model for full examples.
Creates a new Model class from the specified config object. See Ext.data.Model for full examples.
A configuration object for the Model you wish to create.
The newly registered Model
Creates a new store for the given id and config, then registers it with the Store Mananger. Sample usage:
Ext.regStore('AllUsers', {
model: 'User'
});
//the store can now easily be used throughout the application
new Ext.List({
store: 'AllUsers',
... other config
});
The id to set on the new store
The store config
The new Component class.
Convenient alias of Ext.Loader.require. Please see the introduction documentation of Ext.Loader for examples.
Convenient alias of Ext.Loader.require. Please see the introduction documentation of Ext.Loader for examples.
Selects elements based on the passed CSS selector to enable Element methods to be applied to many related elements in one statement through the returned CompositeElement or CompositeElementLite object.
The CSS selector or an array of elements
(optional) The root element of the query or id of the root
Old alias to Ext.Array.sum @deprecated 4.0.0 Use Ext.Array.sum instead
Synchronous version of require, convenient alias of Ext.Loader.syncRequire.
Convenient alias to Ext.Array.toArray
Convenient alias to Ext.Array.toArray
iterable object to be turned into a true Array.
array
Turns an array into a sentence, joined by a specified connector - e.g.: Ext.toSentence(['Adama', 'Tigh', 'Roslin']); //'Adama, Tigh and Roslin' Ext.toSentence(['Adama', 'Tigh', 'Roslin'], 'or'); //'Adama, Tigh or Roslin'
The array to create a sentence from
The string to use to connect the last two words. Usually 'and' or 'or' - defaults to 'and'.
The sentence string @deprecated 4.0.0 Will be removed in the next major version
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 whitespaceOld alias to Ext.Array.unique @deprecated 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.
Appends content to the query string of a URL, handling logic for whether to place a question mark or ampersand.
The URL to append to.
The content to append to the URL.
(String) The resulting URL
A convenient alias method for Ext.Object.fromQueryString @deprecated 4.0.0 Use Ext.Object.fromQueryString instead
A convenient alias method for Ext.Object.fromQueryString @deprecated 4.0.0 Use Ext.Object.fromQueryString instead
A convenient alias method for Ext.Object.toQueryString @deprecated 4.0.0 Use Ext.Object.toQueryString instead
A convenient alias method for Ext.Object.toQueryString @deprecated 4.0.0 Use Ext.Object.toQueryString instead
Utility method for returning a default value if the passed value is empty.
The value is deemed to be empty if it is
The value to test
The value to return if the original value is empty
(optional) true to allow zero length strings to qualify as non-empty (defaults to false)
value, if non-empty, else defaultValue @deprecated 4.0.0 Use {Ext#valueFrom} instead
Returns the given value itself if it's not empty, as described in isEmpty; returns the default value (second argument) otherwise.
The value to test
The value to return if the original value is empty
(optional) true to allow zero length strings to qualify as non-empty (defaults to false)
value, if non-empty, else defaultValue
Convenient shorthand to create a widget by its xtype, also see Ext.ClassManager.instantiateByAlias
var button = Ext.widget('button'); // Equivalent to Ext.create('widget.button')
var panel = Ext.widget('panel'); // Equivalent to Ext.create('widget.panel')
Zips N sets together.
// Example 1:
Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]]
// Example 2:
Ext.zip(
[ "+", "-", "+"],
[ 12, 10, 22],
[ 43, 15, 96],
function(a, b, c){
return "$" + a + "" + b + "." + c
}
); // ["$+12.43", "$-10.15", "$+22.96"]
This argument may be repeated. Array(s) to contribute values.
(optional) The last item in the argument list. This will drive how the items are zipped together.
The zipped set. @deprecated 4.0.0 Will be removed in the next major version