Ext
Files
Ext is the global namespace for the whole Sencha Touch framework. Every class, function and configuration for the whole framework exists under this single global variable. The Ext singleton itself contains a set of useful helper functions (like apply, min and others), but most of the framework that you use day to day exists in specialized classes (for example Ext.Panel, Ext.Carousel and others).
If you are new to Sencha Touch we recommend starting with the Getting Started Guide to get a feel for how the framework operates. After that, use the more focused guides on subjects like panels, forms and data to broaden your understanding. The MVC guides take you through the process of building full applications using the framework, and detail how to deploy them to production.
The functions listed below are mostly utility functions used internally by many of the classes shipped in the framework, but also often useful in your own apps.
A method that is crucial to beginning your application is Ext.setup. Please refer to it's documentation, or the Getting Started Guide as a reference on beginning your application.
Ext.setup({
onReady: function() {
Ext.Viewport.add({
xtype: 'component',
html: 'Hello world!'
});
}
});
Available since: 1.1.0
Properties
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.
This property has been removed since 2.0.0
Available since: 1.1.0
Defaults to: {eventPublishers: {dom: {xclass: 'Ext.event.publisher.Dom'}, touchGesture: {xclass: 'Ext.event.publisher.TouchGesture', recognizers: {drag: {xclass: 'Ext.event.recognizer.Drag'}, tap: {xclass: 'Ext.event.recognizer.Tap'}, doubleTap: {xclass: 'Ext.event.recognizer.DoubleTap'}, longPress: {xclass: 'Ext.event.recognizer.LongPress'}, swipe: {xclass: 'Ext.event.recognizer.HorizontalSwipe'}, pinch: {xclass: 'Ext.event.recognizer.Pinch'}, rotate: {xclass: 'Ext.event.recognizer.Rotate'}}}, componentDelegation: {xclass: 'Ext.event.publisher.ComponentDelegation'}, componentPaint: {xclass: 'Ext.event.publisher.ComponentPaint'}, componentSize: {xclass: 'Ext.event.publisher.ComponentSize'}}, logger: {enabled: true, xclass: 'Ext.log.Logger', minPriority: 'deprecate', writers: {console: {xclass: 'Ext.log.writer.Console', throwOnErrors: true, formatter: {xclass: 'Ext.log.formatter.Default'}}}}, animator: {xclass: 'Ext.fx.Runner'}, viewport: {xclass: 'Ext.viewport.Viewport'}}
Available since: 2.0.0
True to automatically uncache orphaned Ext.Elements periodically.
True to automatically uncache orphaned Ext.Elements periodically.
This property has been removed since 2.0.0
Available since: 1.1.0
True to automatically purge event listeners during garbageCollection.
True to automatically purge event listeners during garbageCollection.
This property has been removed since 2.0.0
Available since: 1.1.0
An array containing extra enumerables for old browsers
An array containing extra enumerables for old browsers
Available since: 2.0.0
True when the document is fully initialized and ready for action
Defaults to: false
Available since: 1.1.0
True if the page is running over SSL.
True if the page is running over SSL.
This property has been removed since 2.0.0
Please use Ext.env.Browser.isSecure instead
Available since: 1.1.0
Methods
Loads Ext.app.Application class and starts it up with given configuration after the page is ready.
Ext.application({
launch: function() {
alert('Application launched!');
}
});
See Ext.app.Application for details.
Available since: 2.0.0
Parameters
- config : Object
An object with the following config options:
- launch : Function
A function to be called when the application is ready. Your application logic should be here. Please see Ext.app.Application for details.
- viewport : Object
An object to be used when creating the global Ext.Viewport instance. Please refer to the Ext.Viewport documentation for more information.
Ext.application({ viewport: { layout: 'vbox' }, launch: function() { Ext.Viewport.add({ flex: 1, html: 'top (flex: 1)' }); Ext.Viewport.add({ flex: 4, html: 'bottom (flex: 4)' }); } }); - icon : String/Object
A icon configuration for this application. This will only apply to iOS applications which are saved to the homescreen.
You can either pass a string which will be applied to all different sizes:
Ext.setup({ icon: 'icon.png', onReady: function() { console.log('Launch...'); } });Or an object which has a location for different sizes:
Ext.setup({ icon: { '57': 'icon57.png', '77': 'icon77.png', '114': 'icon114.png', '144': 'icon144.png' }, onReady: function() { console.log('Launch...'); } }); - requires : String[]
An array of required classes for your application which will be automatically loaded if Ext.Loader.enabled is set to
true. Please refer to Ext.Loader and Ext.Loader.require for more information.Ext.application({ requires: ['Ext.Button', 'Ext.tab.Panel'], launch: function() { //... } }); - eventPublishers : Object
Sencha Touch, by default, includes various Ext.event.recognizer.Recognizer subclasses to recognise events fired in your application. The list of default recognisers can be found in the documentation for Ext.event.recognizer.Recognizer.
To change the default recognisers, you can use the following syntax:
Ext.application({ eventPublishers: { touchGesture: { recognizers: { swipe: { //this will include both vertical and horizontal swipe recognisers xclass: 'Ext.event.recognizer.Swipe' } } } }, launch: function() { //... } });You can also disable recognizers using this syntax:
Ext.application({ eventPublishers: { touchGesture: { recognizers: { swipe: null, pinch: null, rotate: null } } }, launch: function() { //... } });
- launch : Function
- glossOnIcon : Boolean
True to add a gloss effect to the icon.
- statusBarStyle : String
The style of status bar to be shown on applications added to the iOS homescreen. Valid options are:
defaultblackblack-translucent
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.
Available since: 1.1.0
Parameters
- object : Object
The receiver of the properties
- config : Object
The source of the properties
- defaults : Object
A different object that will also be applied for default values
Returns
- Object
returns obj
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
Available since: 2.0.0
Parameters
- fn : Function
The function to delegate.
- scope : Object (optional)
The scope (
thisreference) 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, if a number the args are inserted at the specified position
Returns
- Function
The new function
Calls function after specified delay, or right away when delay == 0.
Available since: 2.0.0
Parameters
Old alias to Ext.Array.clean
Filter through an array and remove empty item as defined in Ext.isEmpty
See Ext.Array.filter
This method has been deprecated since 4.0.0
Please use Ext.Array.clean instead
Available since: 2.0.0
Parameters
- array : Array
Returns
- Array
results
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');
}
});
Important note: To borrow class prototype methods, use Ext.Base.borrow instead.
Available since: 2.0.0
Parameters
- dest : Object
The destination object.
- source : Object
The source object.
- names : String/String[]
Either an Array of property names, or a comma-delimited list of property names to copy.
- usePrototypeKeys : Boolean (optional)
Defaults to false. Pass true to copy keys off of the prototype as well as the instance.
Returns
- Object
The modified object.
Convenient shorthand, see Ext.ClassManager.instantiate
Available since: 1.1.0
Convenient shorthand, see Ext.ClassManager.instantiateByAlias
Available since: 2.0.0
Creates an interceptor function. The passed function is called before the original one. If it returns false, the original one is not called. The resulting function returns the results of the original function. The passed function is called with the parameters of the original function. Example usage:
var sayHi = function(name){
alert('Hi, ' + name);
}
sayHi('Fred'); // alerts "Hi, Fred"
// create a new function that validates input without
// directly modifying the original function:
var sayHiToFriend = Ext.Function.createInterceptor(sayHi, function(name){
return name == 'Brian';
});
sayHiToFriend('Fred'); // no alert
sayHiToFriend('Brian'); // alerts "Hi, Brian"
This method has been deprecated
2.0.0 Please use createInterceptor instead
Available since: 1.1.1
Parameters
- origFn : Function
The original function.
- newFn : Function
The function to call before the original
- scope : Object (optional)
The scope (
thisreference) in which the passed function is executed. If omitted, defaults to the scope in which the original function is called or the browser window. - returnValue : Object (optional)
The value to return if the passed function return false (defaults to null).
Returns
- Function
The new function
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.
Available since: 1.1.0
Parameters
- json : String
The JSON string
- safe : Boolean (optional)
Whether to return null or throw an exception if the JSON is invalid.
Returns
- Object
The resulting object
Calls this function after the number of millseconds 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
Available since: 1.1.0
Parameters
- fn : Function
The function to defer.
- millis : Number
The number of milliseconds for the setTimeout call (if less than or equal to 0 the function is executed immediately)
- scope : Object (optional)
The scope (
thisreference) 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, if a number the args are inserted at the specified position
Returns
- Number
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) {
console.log(s + this.someProperty);
}
});
var obj = new My.awesome.Class();
obj.someMethod('Say '); // logs 'Say something' to the console
To defines 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 for an override is to provide optional parts of classes that can be independently required. In this case, the class may even be unaware of the override altogether.
Ext.define('My.ux.CoolTip', {
override: 'Ext.tip.ToolTip',
constructor: function (config) {
this.callParent(arguments); // calls Ext.tip.ToolTip's constructor
//...
}
});
The above override can now be required as normal.
Ext.define('My.app.App', {
requires: [
'My.ux.CoolTip'
]
});
Overrides can also contain statics:
Ext.define('My.app.BarMod', {
override: 'Ext.foo.Bar',
statics: {
method: function (x) {
return this.callParent([x * 2]); // call Ext.foo.Bar.method
}
}
});
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.
Available since: 2.0.0
Parameters
- className : String
The class name to create in string dot-namespaced format, for example: 'My.very.awesome.Class', 'FeedViewer.plugin.CoolPager'
It is highly recommended to follow this simple convention: - The root and the class name are 'CamelCased' - Everything else is lower-cased
- 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:
mixinsstaticsconfigaliasselfsingletonalternateClassNameoverride
- createdFn : Function
Optional callback to execute after the class (or override) is created. The execution scope (
this) will be the newly created class itself.
Returns
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.Element and Ext.Component. Any number of elements and/or components can be passed into this function in a single call as separate arguments.
Available since: 1.1.0
Parameters
- args : Mixed...
An Ext.Element, Ext.Component, or an Array of either of these to destroy
Dispatches a request to a controller action.
This method has been removed since 2.0.0
Please use Ext.app.Application.dispatch instead
Available since: 1.1.0
Iterates an array or an iterable value and invoke the given callback function for each item.
var countries = ['Vietnam', 'Singapore', 'United States', 'Russia'];
Ext.Array.each(countries, function(name, index, countriesItSelf) {
console.log(name);
});
var sum = function() {
var sum = 0;
Ext.Array.each(arguments, function(value) {
sum += value;
});
return sum;
};
sum(1, 2, 3); // returns 6
The iteration can be stopped by returning false in the function callback.
Ext.Array.each(countries, function(name, index, countriesItSelf) {
if (name === 'Singapore') {
return false; // break here
}
});
Ext.each is alias for Ext.Array.each
Available since: 1.1.0
Parameters
- iterable : Array/NodeList/Object
The value to be iterated. If this argument is not iterable, the callback function is called once.
- fn : Function
The callback function. If it returns false, the iteration stops and this method returns the current
index.Parameters
- item : Object
The item at the current
indexin the passedarray - index : Number
The current
indexwithin thearray - allItems : Array
The
arrayitself which was passed as the first argument
Returns
- Boolean
Return false to stop iteration.
- item : Object
- scope : Object (optional)
The scope (
thisreference) in which the specified function is executed. - reverse : Boolean (optional)
Reverse the iteration order (loop from the end to the beginning) Defaults false
Returns
- Boolean
See description for the
fnparameter.
Shorthand for Ext.JSON.encode
Encodes an Object, Array or other value
Available since: 1.1.0
Parameters
- o : Object
The variable to encode
Returns
- String
The JSON string
Convenient shortcut to Ext.Loader.exclude.
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, eg:
Ext.exclude('Ext.data.*').require('*');
Ext.exclude('widget.button*').require('widget.*');
Available since: 2.0.0
Parameters
- excludes : Array
Returns
- Object
object contains
requiremethod for chaining
This method deprecated. Use Ext.define instead.
This method has been deprecated since 4.0.0
Please use Ext.define instead
Available since: 1.1.0
Parameters
Returns
- Function
The subclass constructor from the overrides parameter, or a generated one if not provided.
A global factory method to instatiate 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
Available since: 2.0.0
Parameters
Old alias to Ext.Array.flatten
Recursively flattens into 1-d Array. Injects Arrays inline.
This method has been deprecated since 4.0.0
Please use Ext.Array.flatten instead
Available since: 2.0.0
Parameters
- array : Array
The array to flatten
Returns
- Array
The 1-d array.
Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - the dom node can be overwritten by other code. fly is alias for Ext.dom.Element.fly.
Use this to make one-time references to DOM elements which are not going to be accessed again either by application code, or by Ext's classes. If accessing an element which will be processed regularly, then Ext.get will be more appropriate to take advantage of the caching provided by the Ext.dom.Element class.
Available since: 1.1.0
Parameters
- element : String/HTMLElement
The dom node or id
- named : String (optional)
Allows for creation of named reusable flyweights to prevent conflicts (e.g. internally Ext uses "_global")
Returns
- Ext.dom.Element
The shared Element object (or null if no matching element was found)
Retrieves Ext.dom.Element objects. get is alias for Ext.dom.Element.get.
This method does not retrieve Components. This method retrieves Ext.dom.Element objects which encapsulate DOM elements. To retrieve a Component by its ID, use Ext.ComponentManager.get.
Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with the same id via AJAX or DOM.
Available since: 1.1.0
Parameters
- el : String/HTMLElement/Ext.Element
The id of the node, a DOM Node or an existing Element.
Returns
- Ext.dom.Element
The Element object (or null if no matching element was found)
Returns the current document body as an Ext.Element.
Available since: 1.1.0
Returns
- Object
Ext.Element The document body
Convenient shorthand, see Ext.ClassManager.getClass
Available since: 2.0.0
Convenient shorthand for Ext.ClassManager.getName.
Get the name of the class by its reference or its instance; usually invoked by the shorthand Ext.getClassName
Ext.ClassManager.getName(Ext.Action); // returns "Ext.Action"
Available since: 2.0.0
Parameters
Returns
- String
className
This is shorthand reference to Ext.ComponentMgr.get. Looks up an existing Component by id
Available since: 1.1.0
Parameters
Returns
- Object
Ext.Component The Component, undefined if not found, or null if a Class was found.
Returns the display name for object. This name is looked for in order from the following places:
displayNamefield of the object.$nameand$classfields of the object.- '$className` field of the object.
This method is used by Ext.Logger.log to display information about objects.
Available since: 2.0.0
Parameters
- object : Mixed (optional)
The object who's display name to determine.
Returns
- String
The determined display name, or "Anonymous" if none found.
Returns the current HTML document object as an Ext.Element.
Available since: 1.1.0
Returns
- Object
Ext.Element 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.
Available since: 1.1.0
Parameters
- el : Mixed
Returns
- Object
HTMLElement
Returns the current document head as an Ext.Element.
Available since: 1.1.0
Returns
- Object
Ext.Element The document head
Returns the current orientation of the mobile device.
This method has been removed
2.0.0 Please use getOrientation instead
Available since: 1.1.0
Shortcut to Ext.data.StoreManager.lookup.
Gets a registered Store by id
Available since: 1.1.0
Parameters
Returns
Generate a unique reference of Ext in the global scope, useful for sandboxing
Available since: 2.0.0
Old alias to Ext.String.htmlDecode
Convert certain characters (&, <, >, and ") from their HTML character equivalents.
This method has been deprecated
Use Ext.String.htmlDecode instead
Available since: 1.1.0
Parameters
- value : String
The string to decode
Returns
- String
The decoded text
Old alias to Ext.String.htmlEncode
Convert certain characters (&, <, >, and ") to their HTML character equivalents for literal display in web pages.
This method has been deprecated
Use Ext.String.htmlEncode instead
Available since: 1.1.0
Parameters
- value : String
The string to encode
Returns
- String
The encoded text
Returns true if the passed value is empty, false otherwise. The value is deemed to be empty if it is either:
nullundefined- a zero-length array
- a zero-length string (Unless the
allowEmptyStringparameter is set totrue)
Available since: 1.1.0
Parameters
- value : Object
The value to test
- allowEmptyString : Boolean (optional)
true to allow empty strings (defaults to false)
Returns
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.
Available since: 1.1.0
Parameters
- object : Object/Array
The object or array to be iterated.
- fn : Function
The function to be called for each iteration. See and Ext.Array.each and Ext.Object.each for detailed lists of arguments passed to this function depending on the given object type that is being iterated.
- scope : Object (optional)
The scope (
thisreference) in which the specified function is executed. Defaults to the object being iterated itself.
Old alias to Ext.Array.max
Returns the maximum value in the Array.
This method has been deprecated since 4.0.0
Please use Ext.Array.max instead
Available since: 2.0.0
Parameters
- array : Array/NodeList
The Array from which to select the maximum value.
- comparisonFn : Function (optional)
a function to perform the comparision which determines maximization. If omitted the ">" operator will be used. Note: gt = 1; eq = 0; lt = -1
Returns
- Object
maxValue The maximum value
Old alias to Ext.Array.mean
Calculates the mean of all items in the array.
This method has been deprecated since 4.0.0
Please use Ext.Array.mean instead
Available since: 2.0.0
Parameters
- array : Array
The Array to calculate the mean value of.
Returns
- Number
The mean.
A convenient alias method for Ext.Object.merge
Available since: 2.0.0
Old alias to Ext.Array.min
Returns the minimum value in the Array.
This method has been deprecated since 4.0.0
Please use Ext.Array.min instead
Available since: 2.0.0
Parameters
- array : Array/NodeList
The Array from which to select the minimum value.
- comparisonFn : Function (optional)
a function to perform the comparision which determines minimization. If omitted the "<" operator will be used. Note: gt = 1; eq = 0; lt = -1
Returns
- Object
minValue The minimum value
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) { ... };
Available since: 1.1.0
Parameters
Returns
- Object
The namespace object. (If multiple arguments are passed, this will be the last namespace created) @function
Convenient alias for Ext.namespace
Available since: 2.0.0
This method is deprecated, please use Ext.Number.from instead
This method has been deprecated since 4.0.0
Replaced by Ext.Number.from
Available since: 1.1.0
Adds a listener to be notified when the document is ready and all dependencies are loaded.
Available since: 1.1.0
Parameters
- fn : Function
The method the event invokes.
- scope : Object (optional)
The scope in which the handler function executes. Defaults to the browser window.
- options : Boolean (optional)
Options object as passed to Ext.Element.addListener. It is recommended that the options
{single: true}be used so that the handler is removed on first invocation.
Proxy to Ext.Base.override. Please refer Ext.Base.override for further details.
This method has been deprecated since 4.1.0
Please use Ext.define instead
Available since: 1.1.0
Parameters
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
Available since: 2.0.0
Parameters
- fn : Function
The original function
- args : Array
The arguments to pass to new callback
- scope : Object (optional)
The scope (
thisreference) in which the function is executed.
Returns
- Function
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]
This method has been deprecated since 4.0.0
Please use Ext.Array.pluck instead
Available since: 1.1.0
Parameters
- array : Array/NodeList
The Array of items to pluck the value from.
- propertyName : String
The property name to pluck from each element.
Returns
- Array
The value from each item in the Array.
Registers a new ptype.
This method has been removed since 2.0.0
Available since: 1.1.0
Dispatches a request to a controller action, adding to the History stack and updating the page url as necessary.
This method has been removed since 2.0.0
Available since: 1.1.0
Registers a new xtype.
This method has been removed since 2.0.0
Available since: 1.1.0
Creates a new Application class from the specified config object.
This method has been removed since 2.0.0
Available since: 1.1.0
Creates a new Controller class from the specified config object.
This method has been removed since 2.0.0
Available since: 1.1.0
Registers new layout type.
This method has been removed since 2.0.0
Available since: 1.1.0
Old way for creating Model classes. Instead use:
Ext.define("MyModel", {
extend: "Ext.data.Model",
fields: []
});
This method has been deprecated since 2.0.0
Please use define instead.
Available since: 1.1.0
Parameters
- name : String
Name of the Model class.
- config : Object
A configuration object for the Model you wish to create.
Returns
- Ext.data.Model
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
});
Available since: 1.1.0
Parameters
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.
Available since: 1.1.0
Parameters
- node : HTMLElement
The node to remove
Repaints the whole page. This fixes frequently encountered painting issues in mobile Safari.
Available since: 1.1.0
Convenient alias of Ext.Loader.require. Please see the introduction documentation of Ext.Loader for examples.
Loads all classes by the given names and all their direct dependencies; optionally executes the given callback function when finishes, within the optional scope. This method is aliased by Ext.require for convenience
Available since: 2.0.0
Parameters
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 CompositeElementLite object.
Available since: 1.1.0
Parameters
- selector : String/HTMLElement[]
The CSS selector or an array of elements
- root : HTMLElement/String (optional)
The root element of the query or id of the root
Returns
Ext.setup() is the entry-point to initialize a Sencha Touch application. Note that if your application makes use of MVC architecture, use application instead.
This method accepts one single argument in object format. The most basic use of Ext.setup() is as follows:
Ext.setup({
onReady: function() {
// ...
}
});
This sets up the viewport, initializes the event system, instantiates a default animation runner, and a default
logger (during development). When all of that is ready, it invokes the callback function given to the onReady key.
The default scope (this) of onReady is the main viewport. By default the viewport instance is stored in
Ext.Viewport. For example, this snippet adds a 'Hello World' button that is centered on the screen:
Ext.setup({
onReady: function() {
this.add({
xtype: 'button',
centered: true,
text: 'Hello world!'
}); // Equivalent to Ext.Viewport.add(...)
}
});
Available since: 1.1.0
Parameters
- config : Object
An object with the following config options:
- onReady : Function
A function to be called when the application is ready. Your application logic should be here.
- viewport : Object
A custom config object to be used when creating the global Ext.Viewport instance. Please refer to the Ext.Viewport documentation for more information.
Ext.setup({ viewport: { width: 500, height: 500 }, onReady: function() { // ... } }); - icon : String/Object
Specifies a set of URLs to the application icon for different device form factors. This icon is displayed when the application is added to the device's Home Screen.
Ext.setup({ icon: { 57: 'resources/icons/Icon.png', 72: 'resources/icons/Icon~ipad.png', 114: 'resources/icons/Icon@2x.png', 144: 'resources/icons/Icon~ipad@2x.png' }, onReady: function() { // ... } });Each key represents the dimension of the icon as a square shape. For example: '57' is the key for a 57 x 57 icon image. Here is the breakdown of each dimension and its device target:
- 57: Non-retina iPhone, iPod touch, and all Android devices
- 72: Retina iPhone and iPod touch
- 114: Non-retina iPad (first and second generation)
- 144: Retina iPad (third generation)
Note that the dimensions of the icon images must be exactly 57x57, 72x72, 114x114 and 144x144 respectively.
It is highly recommended that you provide all these different sizes to accomodate a full range of devices currently available. However if you only have one icon in one size, make it 57x57 in size and specify it as a string value. This same icon will be used on all supported devices.
Ext.setup({ icon: 'resources/icons/Icon.png', onReady: function() { // ... } }); - startupImage : Object
Specifies a set of URLs to the application startup images for different device form factors. This image is displayed when the application is being launched from the Home Screen icon. Note that this currently only applies to iOS devices.
Ext.setup({ startupImage: { '320x460': 'resources/startup/320x460.jpg', '640x920': 'resources/startup/640x920.png', '768x1004': 'resources/startup/768x1004.png', '748x1024': 'resources/startup/748x1024.png', '1536x2008': 'resources/startup/1536x2008.png', '1496x2048': 'resources/startup/1496x2048.png' }, onReady: function() { // ... } });Each key represents the dimension of the image. For example: '320x460' is the key for a 320px x 460px image. Here is the breakdown of each dimension and its device target:
- 320x460: Non-retina iPhone, iPod touch, and all Android devices
- 640x920: Retina iPhone and iPod touch
- 768x1004: Non-retina iPad (first and second generation) in portrait orientation
- 748x1024: Non-retina iPad (first and second generation) in landscape orientation
- 1536x2008: Retina iPad (third generation) in portrait orientation
- 1496x2048: Retina iPad (third generation) in landscape orientation
Please note that there's no automatic fallback machanism for the startup images. In other words, if you don't specify a valid image for a certain device, nothing will be displayed while the application is being launched on that device.
- requires : String[]
An array of required classes for your application which will be automatically loaded before 'onReady' is invoked. Please refer to Ext.Loader and Ext.Loader.require for more information.
Ext.setup({ requires: ['Ext.Button', 'Ext.tab.Panel'], onReady: function() { //... } }); - eventPublishers : Object
Sencha Touch, by default, includes various Ext.event.recognizer.Recognizer subclasses to recognise events fired in your application. The list of default recognisers can be found in the documentation for Ext.event.recognizer.Recognizer.
To change the default recognisers, you can use the following syntax:
Ext.setup({ eventPublishers: { touchGesture: { recognizers: { swipe: { //this will include both vertical and horizontal swipe recognisers xclass: 'Ext.event.recognizer.Swipe' } } } }, onReady: function() { //... } });You can also disable recognizers using this syntax:
Ext.setup({ eventPublishers: { touchGesture: { recognizers: { swipe: null, pinch: null, rotate: null } } }, onReady: function() { //... } });
- onReady : Function
- isIconPrecomposed : Boolean
True to not having a glossy effect added to the icon by the OS, which will preserve its exact look. This currently only applies to iOS devices.
- statusBarStyle : String
The style of status bar to be shown on applications added to the iOS homescreen. Valid options are:
defaultblackblack-translucent
Useful snippet to show an exact, narrowed-down list of top-level Components that are not yet destroyed.
Available since: 2.0.0
Old alias to Ext.Array.sum
Calculates the sum of all items in the given array.
This method has been deprecated since 4.0.0
Please use Ext.Array.sum instead
Available since: 2.0.0
Parameters
- array : Array
The Array to calculate the sum value of.
Returns
- Number
The sum.
Synchronous version of require, convenient alias of Ext.Loader.syncRequire.
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. This method is aliased by syncRequire for convenience
Available since: 2.0.0
Parameters
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', 'i']
Ext.toArray is alias for Ext.Array.toArray
Available since: 1.1.0
Parameters
- iterable : Object
the iterable object to be turned into a true Array.
- start : Number (optional)
a zero-based index that specifies the start of extraction. Defaults to 0
- end : Number (optional)
a zero-based index that specifies the end of extraction. Defaults to the last index of the iterable value
Returns
- Array
array
Old alias to typeOf
Returns the type of the given variable in string format. List of possible values are:
undefined: If the given value isundefinednull: If the given value isnullstring: 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 aDateobjectfunction: 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 whitespace
This method has been deprecated since 4.0.0
Please use typeOf instead
Available since: 2.0.0
Parameters
- value : Object
Returns
Returns the type of the given variable in string format. List of possible values are:
undefined: If the given value isundefinednull: If the given value isnullstring: 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 aDateobjectfunction: 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 whitespace
Available since: 2.0.0
Parameters
- value : Object
Returns
Old alias to Ext.Array.unique
Returns a new array with unique items
This method has been deprecated since 4.0.0
Please use Ext.Array.unique instead
Available since: 2.0.0
Parameters
- array : Array
Returns
- Array
results
Old alias to Ext.String.urlAppend
Appends content to the query string of a URL, handling logic for whether to place a question mark or ampersand.
This method has been deprecated
Use Ext.String.urlAppend instead
Available since: 1.1.0
Parameters
Returns
- Object
(String) The resulting URL
A convenient alias method for Ext.Object.fromQueryString
This method has been deprecated since 4.0.0
Please use Ext.Object.fromQueryString instead
Available since: 1.1.0
A convenient alias method for Ext.Object.toQueryString
This method has been deprecated since 4.0.0
Please use Ext.Object.toQueryString instead
Available since: 1.1.0
Returns the given value itself if it's not empty, as described in isEmpty; returns the default value (second argument) otherwise.
Available since: 2.0.0
Parameters
- value : Object
The value to test
- defaultValue : Object
The value to return if the original value is empty
- allowBlank : Boolean (optional)
true to allow zero length strings to qualify as non-empty (defaults to false)
Returns
- Object
value, if non-empty, else defaultValue
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')
Available since: 2.0.0
Parameters
- name : Object