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!'
});
}
});
URL to a blank file used by Ext JS 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
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.Swipe'}, pinch: {xclass: 'Ext.event.recognizer.Pinch'}, rotate: {xclass: 'Ext.event.recognizer.Rotate'}, edgeSwipe: {xclass: 'Ext.event.recognizer.EdgeSwipe'}}}, componentDelegation: {xclass: 'Ext.event.publisher.ComponentDelegation'}, componentPaint: {xclass: 'Ext.event.publisher.ComponentPaint'}, elementPaint: {xclass: 'Ext.event.publisher.ElementPaint'}, elementSize: {xclass: 'Ext.event.publisher.ElementSize'}, seriesItemEvents: {xclass: 'Ext.chart.series.ItemPublisher'}}, 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'}}
true
to automatically un-cache orphaned Ext.Elements periodically.
true
to automatically un-cache orphaned Ext.Elements periodically.
This property has been removed since 2.0.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
An array containing extra enumerables for old browsers.
An array containing extra enumerables for old browsers.
This indicate the start timestamp of current cycle. It is only reliable during dom-event-initiated cycles and Ext.draw.Animator initiated cycles.
True when the document is fully initialized and ready for action
Defaults to: false
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
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.
An object with the following config options:
A function to be called when the application is ready. Your application logic should be here. Please see Ext.app.Application for details.
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)'
});
}
});
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.application({
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'
},
launch: 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:
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 accommodate 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() {
// ...
}
});
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.application({
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'640x1096': 'resources/startup/640x1096.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: 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:
Please note that there's no automatic fallback mechanism 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.
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.
The style of status bar to be shown on applications added to the iOS home screen. Valid options are:
default
black
black-translucent
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() {
// ...
}
});
Sencha Touch, by default, includes various Ext.event.recognizer.Recognizer subclasses to recognize events fired in your application. The list of default recognizers can be found in the documentation for Ext.event.recognizer.Recognizer.
To change the default recognizers, you can use the following syntax:
Ext.application({
eventPublishers: {
touchGesture: {
recognizers: {
swipe: {
// this will include both vertical and horizontal swipe recognizers
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() {
// ...
}
});
This function will execute once the production microloader determines there are updates to the application and has merged the updates into the application. You can then alert the user there was an update and can then reload the application to execute the updated application.
Ext.application({
onUpdated : function() {
Ext.Msg.confirm(
'Application Update',
'This application has just successfully been updated to the latest version. Reload now?',
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
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
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
The function to delegate.
The scope (this
reference) in which the function is executed.
If omitted, defaults to the browser window.
Overrides arguments for the call. (Defaults to the arguments passed by the caller)
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.
Calls function after specified delay, or right away when delay == 0.
Old alias to Ext.Array.clean
This method has been deprecated since 2.0.0
Please use Ext.Array.clean instead
results
Copies a set of named properties from 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.
The destination object.
The source object.
Either an Array of property names, or a comma-delimited list of property names to copy.
Pass true
to copy keys off of the prototype as well as the instance.
Defaults to: false
The modified object.
Instantiate a class by either full name, alias or alternate name.
If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.
For example, all these three lines return the same result:
// alias
var formPanel = Ext.create('widget.formpanel', { width: 600, height: 800 });
// alternate name
var formPanel = Ext.create('Ext.form.FormPanel', { width: 600, height: 800 });
// full class name
var formPanel = Ext.create('Ext.form.Panel', { width: 600, height: 800 });
Additional arguments after the name will be passed to the class' constructor.
instance
Convenient shorthand, see Ext.ClassManager.instantiateByAlias.
Additional arguments after the alias will be passed to the class constructor.
instance
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 since 2.0.0
Please use createInterceptor instead
The original function.
The function to call before the original.
The scope (this
reference) in which the passed function is executed.
If omitted, defaults to the scope in which the original function is called or the browser window.
The value to return if the passed function return false
.
Defaults to: null
The new function.
Shorthand for Ext.JSON.decode.
The JSON string.
Whether to return null
or throw an exception if the JSON is invalid.
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
The function to defer.
The number of milliseconds for the setTimeout()
call.
If less than or equal to 0 the function is executed immediately.
The scope (this
reference) in which the function is executed.
If omitted, defaults to the browser window.
Overrides arguments for the call. Defaults to the arguments passed by the caller.
if true
, args are appended to call args instead of overriding,
if a number the args are inserted at the specified position.
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.
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
The key - value pairs of properties to apply to this class. Property names can be of any valid strings, except those in the reserved listed below:
mixins
statics
config
alias
xtype
(for Ext.Components only)self
singleton
alternateClassName
override
Optional callback to execute after the class (or override)
is created. The execution scope (this
) will be the newly created class itself.
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.
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
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
The value to be iterated. If this argument is not iterable, the callback function is called once.
The callback function. If it returns false
, the iteration stops and this method returns
the current index
.
The item at the current index
in the passed array
The current index
within the array
The array
itself which was passed as the first argument
Return false to stop iteration.
The scope (this
reference) in which the specified function is executed.
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.
The variable to encode.
The JSON string.
Convenient shortcut to Ext.Loader.exclude.
object contains require
method for chaining.
This method deprecated. Use Ext.define instead.
This method has been deprecated since 2.0.0
Please use Ext.define instead
The subclass constructor from the overrides
parameter, or a generated one if not provided.
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
Old alias to Ext.Array.flatten
This method has been deprecated since 2.0.0
Please use Ext.Array.flatten instead
The array to flatten
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.
The DOM node or id
.
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.dom.Element objects. get is alias for Ext.dom.Element.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.
The id
of the node, a DOM Node or an existing Element.
The Element object (or null
if no matching element was found).
Convenient shorthand, see Ext.ClassManager.getClass.
This is shorthand reference to Ext.ComponentMgr.get. Looks up an existing Component by id
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:
displayName
field of the object.$name
and $class
fields of the object.This method is used by Ext.Logger.log to display information about objects.
The object who's display name to determine.
The determined display name, or "Anonymous" if none found.
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.
Returns the current orientation of the mobile device.
This method has been removed since 2.0.0
Please use getOrientation instead
Generate a unique reference of Ext in the global scope, useful for sandboxing.
Old alias to Ext.String.htmlDecode.
This method has been deprecated
Use Ext.String.htmlDecode instead.
The string to decode.
The decoded text.
Old alias to Ext.String.htmlEncode.
This method has been deprecated
Use Ext.String.htmlEncode instead.
The string to encode.
The encoded text.
Returns true
if the passed value is empty, false
otherwise. The value is deemed to be empty if it is either:
null
undefined
allowEmptyString
parameter is set to true
).The value to test.
true
to allow empty strings.
Defaults to: false
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.
The scope (this
reference) in which the specified function is executed.
Defaults to the object being iterated itself.
Old alias to Ext.Array.max
This method has been deprecated since 2.0.0
Please use Ext.Array.max instead
The Array from which to select the maximum value.
a function to perform the comparison which determines maximization. If omitted the ">" operator will be used. Note: gt = 1; eq = 0; lt = -1
maxValue The maximum value
Old alias to Ext.Array.mean
This method has been deprecated since 2.0.0
Please use Ext.Array.mean instead
The Array to calculate the mean value of.
The mean.
A convenient alias method for Ext.Object.merge.
Old alias to Ext.Array.min
This method has been deprecated since 2.0.0
Please use Ext.Array.min instead
The Array from which to select the minimum value.
a function to perform the comparison which determines minimization. If omitted the "<" operator will be used. Note: gt = 1; eq = 0; lt = -1
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) {
// ...
};
The namespace object. If multiple arguments are passed, this will be the last namespace created.
This method is deprecated, please use Ext.Number.from instead
This method has been deprecated since 2.0.0
Replaced by Ext.Number.from
Adds a listener to be notified when the document is ready and all dependencies are loaded.
The method the event invokes.
The scope in which the handler function executes. Defaults to the browser window.
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 2.0.0
Please use Ext.define instead.
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
The original function.
The arguments to pass to new callback.
The scope (this
reference) in which the function is executed.
The new callback function.
Old alias to Ext.Array.pluck
This method has been deprecated since 2.0.0
Please use Ext.Array.pluck instead
The Array of items to pluck the value from.
The property name to pluck from each element.
The value from each item in the Array.
Registers a new ptype.
This method has been removed since 2.0.0
Shorthand of Ext.dom.Query.select
The selector/xpath query (can be a comma separated list of selectors)
The start of the query (defaults to document).
An Array of DOM elements which match the selector. If there are no matches, and empty Array is returned.
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
Registers a new xtype.
This method has been removed since 2.0.0
Creates a new Application class from the specified config object.
This method has been removed since 2.0.0
Creates a new Controller class from the specified config object.
This method has been removed since 2.0.0
Registers new layout type.
This method has been removed since 2.0.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.
Name of the Model class.
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 Manager. Sample usage:
Ext.regStore('AllUsers', {
model: 'User'
});
// the store can now easily be used throughout the application
new Ext.List({
store: 'AllUsers'
// ...
});
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.
The node to remove.
Repaints the whole page. This fixes frequently encountered painting issues in mobile Safari.
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. The element is the root of the search. CompositeElementLite object.
The CSS selector or an array of elements
Return a CompositeElement as opposed to a CompositeElementLite. Defaults to false.
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(...)
}
});
An object with the following config options:
A function to be called when the application is ready. Your application logic should be here.
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() {
// ...
}
});
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:
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 accommodate 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() {
// ...
}
});
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',
'640x1096': 'resources/startup/640x1096.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:
Please note that there's no automatic fallback mechanism 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.
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.
The style of status bar to be shown on applications added to the iOS home screen. Valid options are:
default
black
black-translucent
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() {
// ...
}
});
Sencha Touch, by default, includes various Ext.event.recognizer.Recognizer subclasses to recognize events fired in your application. The list of default recognizers can be found in the documentation for Ext.event.recognizer.Recognizer.
To change the default recognizers, you can use the following syntax:
Ext.setup({
eventPublishers: {
touchGesture: {
recognizers: {
swipe: {
// this will include both vertical and horizontal swipe recognizers
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() {
// ...
}
});
Useful snippet to show an exact, narrowed-down list of top-level Components that are not yet destroyed.
Old alias to Ext.Array.sum
This method has been deprecated since 2.0.0
Please use Ext.Array.sum instead
The Array to calculate the sum value of.
The sum.
Synchronous version of require, convenient alias of Ext.Loader.syncRequire.
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
the iterable object to be turned into a true Array.
a zero-based index that specifies the start of extraction.
Defaults to: 0
a zero-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 undefined
null
: If the given value is null
string
: 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
This method has been deprecated since 2.0.0
Please use Ext.Array.unique instead
results
Old alias to Ext.String.urlAppend.
This method has been deprecated
Use Ext.String.urlAppend instead.
The resulting URL.
A convenient alias method for Ext.Object.fromQueryString.
This method has been deprecated since 2.0.0
Please use Ext.Object.fromQueryString instead
A convenient alias method for Ext.Object.toQueryString.
This method has been deprecated since 2.0.0
Please use Ext.Object.toQueryString
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.
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')
instance