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!'
        });
    }
});
Defined By

Properties

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

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

A reusable empty function

A reusable empty function

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

This indicate the start timestamp of current cycle. It is only reliable during dom-event-initiated cycles and Ext.draw.Animator initiated cycles.

...

Defaults to: 0

True when the document is fully initialized and ready for action ...

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

...

Defaults to: false

...

Defaults to: []

...

Defaults to: []

The version of the framework

The version of the framework

Defined By

Methods

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

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

Ext.application({
    launch: function() {
        alert('Application launched!');
    }
});

See Ext.app.Application for details.

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

      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:

      • 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 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() {
              // ...
          }
      });
      
    • 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.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:

      • 320x460: Non-retina iPhone, iPod touch, and all Android devices
      • 640x920: Retina iPhone and iPod touch
      • 640x1096: iPhone 5 and iPod touch (fifth generation)
      • 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 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.

    • 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 home screen. Valid options are:

      • default
      • black
      • black-translucent
    • 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 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() {
              // ...
          }
      });
      
    • onUpdated : 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();
                      }
                  }
              );
          }
      });
      
( object, config, [defaults] ) : Object
Copies all the properties of config to the specified object. ...

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.

Parameters

  • object : Object

    The receiver of the properties.

  • config : Object

    The source of the properties.

  • defaults : Object (optional)

    A different object that will also be applied for default values.

Returns

( object, config ) : Object
Copies all the properties of config to object if they don't already exist. ...

Copies all the properties of config to object if they don't already exist.

Parameters

  • object : Object

    The receiver of the properties.

  • config : Object

    The source of the properties.

Returns

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

Create a new function from the provided fn, change this to the provided scope, optionally overrides arguments for the call. Defaults to the arguments passed by the caller.

Ext.bind is alias for Ext.Function.bind

Parameters

  • fn : Function

    The function to delegate.

  • scope : Object (optional)

    The scope (this reference) in which the function is executed. If omitted, defaults to the browser window.

  • args : Array (optional)

    Overrides arguments for the call. (Defaults to the arguments passed by the caller)

  • appendArgs : Boolean/Number (optional)

    if true args are appended to call args instead of overriding, if a number the args are inserted at the specified position.

Returns

( callback, [scope], [args], [delay] )
Calls function after specified delay, or right away when delay == 0. ...

Calls function after specified delay, or right away when delay == 0.

Parameters

  • callback : Function

    The callback to execute.

  • scope : Object (optional)

    The scope to execute in.

  • args : Array (optional)

    The arguments to pass to the function.

  • delay : Number (optional)

    Pass a number to delay the call by a number of milliseconds.

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

Old alias to Ext.Array.clean

This method has been deprecated since 2.0.0

Please use Ext.Array.clean instead

Parameters

Returns

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.

Parameters

  • item : Object

    The variable to clone.

Returns

( dest, source, names, [usePrototypeKeys] ) : Object
Copies a set of named properties from the source object to the destination object. ...

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.

Parameters

  • dest : Object

    The destination object.

  • source : Object

    The source object.

  • names : String/String[]

    Either an Array of property names, or a comma-delimited list of property names to copy.

  • usePrototypeKeys : Boolean (optional)

    Pass true to copy keys off of the prototype as well as the instance.

    Defaults to: false

Returns

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

Instantiate a class by either full name, alias or alternate name.

If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.

For example, all these three lines return the same result:

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

Parameters

  • name : String
  • args : Mixed

    Additional arguments after the name will be passed to the class' constructor.

Returns

( alias, args ) : Object
Convenient shorthand, see Ext.ClassManager.instantiateByAlias. ...

Convenient shorthand, see Ext.ClassManager.instantiateByAlias.

Parameters

  • alias : String
  • args : Mixed...

    Additional arguments after the alias will be passed to the class constructor.

Returns

( origFn, newFn, [scope], [returnValue] ) : Functiondeprecated
Creates an interceptor function. ...

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

Parameters

  • origFn : Function

    The original function.

  • newFn : Function

    The function to call before the original.

  • scope : Object (optional)

    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.

  • returnValue : Object (optional)

    The value to return if the passed function return false.

    Defaults to: null

Returns

( )deprecated
Old name for widget. ...

Old name for widget.

This method has been deprecated since 2.0.0

Please use widget instead.

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

Shorthand for Ext.JSON.decode.

Parameters

  • json : String

    The JSON string.

  • safe : Boolean (optional)

    Whether to return null or throw an exception if the JSON is invalid.

Returns

  • Object/null

    The resulting object.

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

Calls this function after the number of milliseconds specified, optionally in a specific scope. Example usage:

var sayHi = function(name){
    alert('Hi, ' + name);
};

// executes immediately:
sayHi('Fred');

// executes after 2 seconds:
Ext.Function.defer(sayHi, 2000, this, ['Fred']);

// this syntax is sometimes useful for deferring
// execution of an anonymous function:
Ext.Function.defer(function(){
    alert('Anonymous');
}, 100);

Ext.defer is alias for Ext.Function.defer

Parameters

  • fn : Function

    The function to defer.

  • millis : Number

    The number of milliseconds for the setTimeout() call. If less than or equal to 0 the function is executed immediately.

  • scope : Object (optional)

    The scope (this reference) in which the function is executed. If omitted, defaults to the browser window.

  • args : Array (optional)

    Overrides arguments for the call. Defaults to the arguments passed by the caller.

  • appendArgs : Boolean/Number (optional)

    if true, args are appended to call args instead of overriding, if a number the args are inserted at the specified position.

Returns

  • Number

    The timeout id that can be used with clearTimeout().

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

Defines a class or override. A basic class is defined like this:

 Ext.define('My.awesome.Class', {
     someProperty: 'something',

     someMethod: function(s) {
         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.

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:

    • mixins
    • statics
    • config
    • alias
    • xtype (for Ext.Components only)
    • self
    • singleton
    • alternateClassName
    • override
  • createdFn : Function (optional)

    Optional callback to execute after the class (or override) is created. The execution scope (this) will be the newly created class itself.

Returns

( cls, oldName, newName, message )private
...

Parameters

Fires

    ( cls, members )private
    ...

    Parameters

    Fires

      ( cls, name, method, message )private
      ...

      Parameters

      ( object, name, method, message )private
      ...

      Parameters

      ( object, oldName, newName, message )private
      ...

      Parameters

      ( object, name, value, message )private
      ...

      Parameters

      Attempts to destroy any objects passed to it by removing all event listeners, removing them from the DOM (if applicab...

      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.

      Parameters

      ( )removed
      Dispatches a request to a controller action. ...

      Dispatches a request to a controller action.

      This method has been removed since 2.0.0

      Please use Ext.app.Application.dispatch instead

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

      Iterates an array or an iterable value and invoke the given callback function for each item.

      var countries = ['Vietnam', 'Singapore', 'United States', 'Russia'];
      
      Ext.Array.each(countries, function(name, index, countriesItSelf) {
          console.log(name);
      });
      
      var sum = function() {
          var sum = 0;
      
          Ext.Array.each(arguments, function(value) {
              sum += value;
          });
      
          return sum;
      };
      
      sum(1, 2, 3); // returns 6
      

      The iteration can be stopped by returning false in the function callback.

      Ext.Array.each(countries, function(name, index, countriesItSelf) {
          if (name === 'Singapore') {
              return false; // break here
          }
      });
      

      Ext.each is alias for Ext.Array.each

      Parameters

      • iterable : Array/NodeList/Object

        The value to be iterated. If this argument is not iterable, the callback function is called once.

      • fn : Function

        The callback function. If it returns false, the iteration stops and this method returns the current index.

        Parameters

        • item : Object

          The item at the current index in the passed array

        • index : Number

          The current index within the array

        • allItems : Array

          The array itself which was passed as the first argument

        Returns

        • Boolean

          Return false to stop iteration.

      • scope : Object (optional)

        The scope (this reference) in which the specified function is executed.

      • reverse : Boolean (optional)

        Reverse the iteration order (loop from the end to the beginning).

        Defaults to: false

      Returns

      • Boolean

        See description for the fn parameter.

      Shorthand for Ext.JSON.encode. ...

      Shorthand for Ext.JSON.encode.

      Parameters

      • o : Object

        The variable to encode.

      Returns

      ( excludes ) : Object
      Convenient shortcut to Ext.Loader.exclude. ...

      Convenient shortcut to Ext.Loader.exclude.

      Parameters

      Returns

      • Object

        object contains require method for chaining.

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

      This method deprecated. Use Ext.define instead.

      This method has been deprecated since 2.0.0

      Please use Ext.define instead

      Parameters

      Returns

      • Function

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

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

      A global factory method to instantiate a class from a config object. For example, these two calls are equivalent:

      Ext.factory({ text: 'My Button' }, 'Ext.Button');
      Ext.create('Ext.Button', { text: 'My Button' });
      

      If an existing instance is also specified, it will be updated with the supplied config object. This is useful if you need to either create or update an object, depending on if an instance already exists. For example:

      var button;
      button = Ext.factory({ text: 'New Button' }, 'Ext.Button', button);     // Button created
      button = Ext.factory({ text: 'Updated Button' }, 'Ext.Button', button); // Button updated
      

      Parameters

      • config : Object

        The config object to instantiate or update an instance with.

      • classReference : String

        The class to instantiate from.

      • instance : Object (optional)

        The instance to update.

      • aliasNamespace : String (optional)
      ( config, callback )private
      ...

      Parameters

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

      Old alias to Ext.Array.flatten

      This method has been deprecated since 2.0.0

      Please use Ext.Array.flatten instead

      Parameters

      • array : Array

        The array to flatten

      Returns

      ( element, [named] ) : Ext.dom.Element
      Gets the globally shared flyweight Element, with the passed node as the active element. ...

      Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - the dom node can be overwritten by other code. fly is alias for Ext.dom.Element.fly.

      Use this to make one-time references to DOM elements which are not going to be accessed again either by application code, or by Ext's classes. If accessing an element which will be processed regularly, then Ext.get will be more appropriate to take advantage of the caching provided by the Ext.dom.Element class.

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

      ...

      Fires

        Retrieves Ext.dom.Element objects. ...

        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.

        Parameters

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

        Returns the current document body as an Ext.Element.

        Returns

        Convenient shorthand, see Ext.ClassManager.getClass. ...

        Convenient shorthand, see Ext.ClassManager.getClass.

        Convenient shorthand for Ext.ClassManager.getName. ...

        Convenient shorthand for Ext.ClassManager.getName.

        Parameters

        Returns

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

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

        Parameters

        Returns

        • Ext.Component

          The Component, undefined if not found, or null if a Class was found.

        Returns the display name for object. ...

        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.
        • '$className` field of the object.

        This method is used by Ext.Logger.log to display information about objects.

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

        Returns the current HTML document object as an Ext.Element.

        Returns

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

        Return the dom node for the passed String (id), dom node, or Ext.Element. Here are some examples:

        // gets dom node based on id
        var elDom = Ext.getDom('elId');
        
        // gets dom node based on the dom node
        var elDom1 = Ext.getDom(elDom);
        
        // If we don't know if we are working with an
        // Ext.Element or a dom node use Ext.getDom
        function(el){
            var dom = Ext.getDom(el);
            // do something with the dom node
        }
        

        Note: the dom node to be found actually needs to exist (be rendered, etc) when this method is called to be successful.

        Parameters

        • el : Mixed

        Returns

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

        Returns the current document head as an Ext.Element.

        Returns

        Returns the current orientation of the mobile device. ...

        Returns the current orientation of the mobile device.

        This method has been removed since 2.0.0

        Please use getOrientation instead

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

        Shortcut to Ext.data.StoreManager.lookup.

        Parameters

        • store : String/Object

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

        Returns

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

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

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

        Old alias to Ext.String.htmlDecode.

        This method has been deprecated

        Use Ext.String.htmlDecode instead.

        Parameters

        • value : String

          The string to decode.

        Returns

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

        Old alias to Ext.String.htmlEncode.

        This method has been deprecated

        Use Ext.String.htmlEncode instead.

        Parameters

        • value : String

          The string to encode.

        Returns

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

        Generates unique ids. If the element is passes and it already has an id, it is unchanged.

        Parameters

        • el : Mixed (optional)

          The element to generate an id for.

        • prefix : String (optional)

          The id prefix.

          Defaults to: ext-gen

        Returns

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

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

        Parameters

        • target : Object

          The target to test.

        Returns

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

        Returns true if the passed value is a Boolean.

        Parameters

        • value : Object

          The value to test.

        Returns

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

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

        Parameters

        • object : Object

          The object to test.

        Returns

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

        Returns true if the passed value is defined.

        Parameters

        • value : Object

          The value to test.

        Returns

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

        Returns true if the passed value is an HTMLElement.

        Parameters

        • value : Object

          The value to test.

        Returns

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

        Returns true if the passed value is empty, false otherwise. The value is deemed to be empty if it is either:

        • null
        • undefined
        • a zero-length array.
        • a zero-length string (Unless the allowEmptyString parameter is set to true).

        Parameters

        • value : Object

          The value to test.

        • allowEmptyString : Boolean (optional)

          true to allow empty strings.

          Defaults to: false

        Returns

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

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

        Parameters

        • value : Object

          The value to test.

        Returns

        Returns true if the passed value is iterable, false otherwise. ...

        Returns true if the passed value is iterable, false otherwise.

        Parameters

        • value : Object

          The value to test.

        Returns

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

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

        Parameters

        • value : String

          The string to test

        Returns

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

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

        Parameters

        • value : Object

          The value to test.

        Returns

        Validates that a value is numeric. ...

        Validates that a value is numeric.

        Parameters

        • value : Object

          Examples: 1, '1', '2.34'

        Returns

        • Boolean

          true if numeric, false otherwise.

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

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

        Parameters

        • value : Object

          The value to test.

        Returns

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

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

        Parameters

        • value : Object

          The value to test.

        Returns

        ( value )private
        ...

        Parameters

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

        Returns true if the passed value is a string.

        Parameters

        • value : Object

          The value to test.

        Returns

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

        Returns true if the passed value is a TextNode.

        Parameters

        • value : Object

          The value to test.

        Returns

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

        Iterates either an array or an object. This method delegates to Ext.Array.each if the given value is iterable, and Ext.Object.each otherwise.

        Parameters

        • object : Object/Array

          The object or array to be iterated.

        • fn : Function

          The function to be called for each iteration. See and Ext.Array.each and Ext.Object.each for detailed lists of arguments passed to this function depending on the given object type that is being iterated.

        • scope : Object (optional)

          The scope (this reference) in which the specified function is executed. Defaults to the object being iterated itself.

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

        Old alias to Ext.Array.max

        This method has been deprecated since 2.0.0

        Please use Ext.Array.max instead

        Parameters

        • array : Array/NodeList

          The Array from which to select the maximum value.

        • comparisonFn : Function (optional)

          a function to perform the comparison which determines maximization. If omitted the ">" operator will be used. Note: gt = 1; eq = 0; lt = -1

        Returns

        • Object

          maxValue The maximum value

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

        Old alias to Ext.Array.mean

        This method has been deprecated since 2.0.0

        Please use Ext.Array.mean instead

        Parameters

        • array : Array

          The Array to calculate the mean value of.

        Returns

        A convenient alias method for Ext.Object.merge. ...

        A convenient alias method for Ext.Object.merge.

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

        Old alias to Ext.Array.min

        This method has been deprecated since 2.0.0

        Please use Ext.Array.min instead

        Parameters

        • array : Array/NodeList

          The Array from which to select the minimum value.

        • comparisonFn : Function (optional)

          a function to perform the comparison which determines minimization. If omitted the "<" operator will be used. Note: gt = 1; eq = 0; lt = -1

        Returns

        • Object

          minValue The minimum value.

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

        Creates namespaces to be used for scoping variables and classes so that they are not global. Specifying the last node of a namespace implicitly creates all other nodes. Usage:

        Ext.namespace('Company', 'Company.data');
        
         // equivalent and preferable to the above syntax
        Ext.namespace('Company.data');
        
        Company.Widget = function() {
            // ...
        };
        
        Company.data.CustomStore = function(config) {
            // ...
        };
        

        Parameters

        Returns

        • Object

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

        Convenient alias for Ext.namespace. ...

        Convenient alias for Ext.namespace.

        ( )deprecated
        This method is deprecated, please use Ext.Number.from instead ...

        This method is deprecated, please use Ext.Number.from instead

        This method has been deprecated since 2.0.0

        Replaced by Ext.Number.from

        ( fn, scope )private
        ...

        Parameters

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

        Adds a listener to be notified when the document is ready and all dependencies are loaded.

        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.

        ( fn, scope )private
        ...

        Parameters

        ( cls, overrides )deprecated
        Proxy to Ext.Base.override. ...

        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.

        Parameters

        • cls : Object

          The class to override

        • overrides : Object

          The properties to add to origClass. This should be specified as an object literal containing one or more properties.

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

        Create a new function from the provided fn, the arguments of which are pre-set to args. New arguments passed to the newly created callback when it's invoked are appended after the pre-set ones. This is especially useful when creating callbacks.

        For example:

        var originalFunction = function(){
            alert(Ext.Array.from(arguments).join(' '));
        };
        
        var callback = Ext.Function.pass(originalFunction, ['Hello', 'World']);
        
        callback(); // alerts 'Hello World'
        callback('by Me'); // alerts 'Hello World by Me'
        

        Ext.pass is alias for Ext.Function.pass

        Parameters

        • fn : Function

          The original function.

        • args : Array

          The arguments to pass to new callback.

        • scope : Object (optional)

          The scope (this reference) in which the function is executed.

        Returns

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

        Old alias to Ext.Array.pluck

        This method has been deprecated since 2.0.0

        Please use Ext.Array.pluck instead

        Parameters

        • array : Array/NodeList

          The Array of items to pluck the value from.

        • propertyName : String

          The property name to pluck from each element.

        Returns

        • Array

          The value from each item in the Array.

        ( )removed
        Registers a new ptype. ...

        Registers a new ptype.

        This method has been removed since 2.0.0

        ( selector, [root] ) : HTMLElement[]
        Shorthand of Ext.dom.Query.select ...

        Shorthand of Ext.dom.Query.select

        Parameters

        • selector : String

          The selector/xpath query (can be a comma separated list of selectors)

        • root : HTMLElement/String (optional)

          The start of the query (defaults to document).

        Returns

        • HTMLElement[]

          An Array of DOM elements which match the selector. If there are no matches, and empty Array is returned.

        ( )removed
        Dispatches a request to a controller action, adding to the History stack and updating the page url as necessary. ...

        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

        ( )removed
        Registers a new xtype. ...

        Registers a new xtype.

        This method has been removed since 2.0.0

        Creates a new Application class from the specified config object. ...

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

        Creates a new Controller class from the specified config object.

        This method has been removed since 2.0.0

        Registers new layout type. ...

        Registers new layout type.

        This method has been removed since 2.0.0

        ( name, config ) : Ext.data.Modeldeprecated
        Old way for creating Model classes. ...

        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.

        Parameters

        • name : String

          Name of the Model class.

        • config : Object

          A configuration object for the Model you wish to create.

        Returns

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

        Creates a new store for the given id and config, then registers it with the Store Manager. Sample usage:

        Ext.regStore('AllUsers', {
            model: 'User'
        });
        
        // the store can now easily be used throughout the application
        new Ext.List({
            store: 'AllUsers'
            // ...
        });
        

        Parameters

        • id : String

          The id to set on the new store.

        • config : Object

          The store config.

        Removes this element from the document, removes all DOM event listeners, and deletes the cache reference. ...

        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.

        Parameters

        • node : HTMLElement

          The node to remove.

        Repaints the whole page. ...

        Repaints the whole page. This fixes frequently encountered painting issues in mobile Safari.

        ( expressions, [fn], [scope], [excludes] )
        Convenient alias of Ext.Loader.require. ...

        Convenient alias of Ext.Loader.require. Please see the introduction documentation of Ext.Loader for examples.

        Parameters

        • expressions : String/Array

          Can either be a string or an array of string.

        • fn : Function (optional)

          The callback function.

        • scope : Object (optional)

          The execution scope (this) of the callback function.

        • excludes : String/Array (optional)

          Classes to be excluded, useful when being used with expressions.

        Selects elements based on the passed CSS selector to enable Element methods to be applied to many related elements in...

        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.

        Parameters

        • selector : String/HTMLElement[]

          The CSS selector or an array of elements

        • composite : Boolean

          Return a CompositeElement as opposed to a CompositeElementLite. Defaults to false.

        Returns

        ( config )
        Ext.setup() is the entry-point to initialize a Sencha Touch application. ...

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

        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 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() {
                    // ...
                }
            });
            
          • 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',
                    '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:

            • 320x460: Non-retina iPhone, iPod touch, and all Android devices
            • 640x920: Retina iPhone and iPod touch
            • 640x1096: iPhone 5 and iPod touch (fifth generation)
            • 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 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.

          • 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 home screen. Valid options are:

            • default
            • black
            • black-translucent
          • 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 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. ...

        Useful snippet to show an exact, narrowed-down list of top-level Components that are not yet destroyed.

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

        Old alias to Ext.Array.sum

        This method has been deprecated since 2.0.0

        Please use Ext.Array.sum instead

        Parameters

        • array : Array

          The Array to calculate the sum value of.

        Returns

        ( expressions, [fn], [scope], [excludes] )
        Synchronous version of require, convenient alias of Ext.Loader.syncRequire. ...

        Synchronous version of require, convenient alias of Ext.Loader.syncRequire.

        Parameters

        • expressions : String/Array

          Can either be a string or an array of string

        • fn : Function (optional)

          The callback function

        • scope : Object (optional)

          The execution scope (this) of the callback function

        • excludes : String/Array (optional)

          Classes to be excluded, useful when being used with expressions

        ( iterable, [start], [end] ) : Array
        Converts any iterable (numeric indices and a length property) into a true array. ...

        Converts any iterable (numeric indices and a length property) into a true array.

        function test() {
            var args = Ext.Array.toArray(arguments),
                fromSecondToLastArgs = Ext.Array.toArray(arguments, 1);
        
            alert(args.join(' '));
            alert(fromSecondToLastArgs.join(' '));
        }
        
        test('just', 'testing', 'here'); // alerts 'just testing here';
                                         // alerts 'testing here';
        
        Ext.Array.toArray(document.getElementsByTagName('div')); // will convert the NodeList into an array
        Ext.Array.toArray('splitted'); // returns ['s', 'p', 'l', 'i', 't', 't', 'e', 'd']
        Ext.Array.toArray('splitted', 0, 3); // returns ['s', 'p', 'l', 'i']
        

        Ext.toArray is alias for Ext.Array.toArray

        Parameters

        • iterable : Object

          the iterable object to be turned into a true Array.

        • start : Number (optional)

          a zero-based index that specifies the start of extraction.

          Defaults to: 0

        • end : Number (optional)

          a zero-based index that specifies the end of extraction.

          Defaults to: -1

        Returns

        ...
        ( value ) : Stringdeprecated
        Old alias to typeOf. ...

        Old alias to typeOf.

        This method has been deprecated since 2.0.0

        Please use typeOf instead.

        Parameters

        Returns

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

        Returns the type of the given variable in string format. List of possible values are:

        • undefined: If the given value is undefined
        • null: If the given value is null
        • string: If the given value is a string
        • number: If the given value is a number
        • boolean: If the given value is a boolean value
        • date: If the given value is a Date object
        • function: If the given value is a function reference
        • object: If the given value is an object
        • array: If the given value is an array
        • regexp: If the given value is a regular expression
        • element: If the given value is a DOM Element
        • textnode: If the given value is a DOM text node and contains something other than whitespace
        • whitespace: If the given value is a DOM text node and contains only whitespace

        Parameters

        Returns

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

        Old alias to Ext.Array.unique

        This method has been deprecated since 2.0.0

        Please use Ext.Array.unique instead

        Parameters

        Returns

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

        Old alias to Ext.String.urlAppend.

        This method has been deprecated

        Use Ext.String.urlAppend instead.

        Parameters

        • url : String

          The URL to append to.

        • string : String

          The content to append to the URL.

        Returns

        ( )deprecated
        A convenient alias method for Ext.Object.fromQueryString. ...

        A convenient alias method for Ext.Object.fromQueryString.

        This method has been deprecated since 2.0.0

        Please use Ext.Object.fromQueryString instead

        ( )deprecated
        A convenient alias method for Ext.Object.toQueryString. ...

        A convenient alias method for Ext.Object.toQueryString.

        This method has been deprecated since 2.0.0

        Please use Ext.Object.toQueryString instead

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

        Returns the given value itself if it's not empty, as described in isEmpty; returns the default value (second argument) otherwise.

        Parameters

        • value : Object

          The value to test.

        • defaultValue : Object

          The value to return if the original value is empty.

        • allowBlank : Boolean (optional)

          true to allow zero length strings to qualify as non-empty.

          Defaults to: false

        Returns

        • Object

          value, if non-empty, else defaultValue.

        Convenient shorthand to create a widget by its xtype, also see Ext.ClassManager.instantiateByAlias var button = Ext....

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

        Parameters

        Returns