Ext JS Sencha Docs

Ext.app.ViewModel

Hierarchy

Ext.Base
Ext.app.ViewModel

Mixins

Requires

Files

This class manages arbitrary data and its relationship to data models. Instances of ViewModel are associated with some Component and then used by their child items for the purposes of Data Binding.

Binding

The most commonly used aspect of a ViewModel is the bind method. This method takes a "bind descriptor" (see below) and a callback to call when the data indicated by the bind descriptor either becomes available or changes.

The bind method, based on the bind descriptor given, will return different types of "binding" objects. These objects maintain the connection between the requested data and the callback. Bindings ultimately derive from Ext.app.bind.BaseBinding which provides several methods to help manage the binding.

Perhaps the most important method is destroy. When the binding is no longer needed it is important to remember to destroy it. Leaking bindings can cause performance problems or worse when callbacks are called at unexpected times.

The types of bindings produced by bind are:

Bind Descriptors

A "bind descriptor" is a value (a String, an Object or an array of these) that describe the desired data. Any piece of data in the ViewModel can be described by a bind descriptor.

Textual Bind Descriptors

The simplest and most common form of bind descriptors are strings that look like an Ext.Template containing text and tokens surrounded by "{}" with dot notation inside to traverse objects and their properties.

For example:

  • 'Hello {user.name}!'
  • 'You have selected "{selectedItem.text}".'
  • '{user.groups}'

The first two bindings are template bindings which use the familiar Ext.Template syntax with some slight differences. For more on templates see Ext.app.bind.Template.

The third bind descriptor is called a "direct bind descriptor". This special form of bind maps one-to-one to some piece of data in the ViewModel and is managed by the Ext.app.bind.Binding class.

Two-Way Descriptors

A direct bind descriptor may be able to write back a value to the ViewModel as well as retrieve one. When this is the case, they are said to be "two-way". For example:

 var binding = viewModel.bind('{s}', function(x) { console.log('s=' + s); });

 binding.setValue('abc');

Direct use of ViewModel in this way is not commonly needed because Ext.Component automates this process. For example, a textfield component understands when it is given a "two-way" binding and automatically synchronizes its value bidirectionally using the above technique. For example:

 Ext.widget({
     items: [{
         xtype: 'textfield',
         bind: '{s}'  // a two-way / direct bind descriptor
     }]
 });

Object and Array Descriptors / Multi-Bind

With two exceptions (see below) an Object is interpreted as a "shape" to produce by treating each of its properties as individual bind descriptors. An object of the same shape is passed as the value of the bind except that each property is populated with the appropriate value. Of course, this definition is recursive, so these properties may also be objects.

For example:

 viewModel.bind({
         x: '{x}',
         foo: {
             bar: 'Hello {foo.bar}'
         }
     },
     function (obj) {
         //  obj = {
         //      x: 42,
         //      foo: {
         //          bar: 'Hello foobar'
         //      }
         //  }
     });

Arrays are handled in the same way. Each element of the array is considered a bind descriptor (recursively) and the value produced for the binding is an array with each element set to the bound property.

Bind Options

One exception to the "object is a multi-bind" rule is when that object contains a bindTo property. When an object contains a bindTo property the object is understood to contain bind options and the value of bindTo is considered the actual bind descriptor.

For example:

 viewModel.bind({
         bindTo: '{x}',
         single: true
     },
     function (x) {
         console.log('x: ' + x); // only called once
     });

The available bind options depend on the type of binding, but since all bindings derive from Ext.app.bind.BaseBinding its options are always applicable. For a list of the other types of bindings, see above.

Deep Binding

When a direct bind is made and the bound property is an object, by default the binding callback is only called when that reference changes. This is the most efficient way to understand a bind of this type, but sometimes you may need to be notified if any of the properties of that object change.

To do this, we create a "deep bind":

 viewModel.bind({
         bindTo: '{someObject}',
         deep: true
     },
     function (someObject) {
         // called when reference changes or *any* property changes
     });

Binding Timings

The ViewModel has a scheduler attached that is used to coordinate the firing of bindings. It serves 2 main purposes: - To coordinate dependencies between bindings. This means bindings will be fired in an order such that the any dependencies for a binding are fired before the binding itself. - To batch binding firings. The scheduler runs on a short timer, so the following code will only trigger a single binding (the last), the changes in between will never be triggered.

viewModel.bind('{val}', function(v) {
    console.log(v);
});
viewModel.set('val', 1);
viewModel.set('val', 2);
viewModel.set('val', 3);
viewModel.set('val', 4);

The ViewModel can be forced to process by calling notify, which will force the scheduler to run immediately in the current state.

viewModel.bind('{val}', function(v) {
    console.log(v);
});
viewModel.set('val', 1);
viewModel.notify();
viewModel.set('val', 2);
viewModel.notify();
viewModel.set('val', 3);
viewModel.notify();
viewModel.set('val', 4);
viewModel.notify();

Models, Stores and Associations

A <code>Session</code> manages model instances and their associations. The ViewModel may be used with or without a Session. When a Session is attached, the ViewModel will always consult the Session to ask about records and stores. The Session ensures that only a single instance of each model Type/Id combination is created. This is important when tracking changes in models so that we always have the same reference.

A ViewModel provides functionality to easily consume the built in data package types Ext.data.Model and Ext.data.Store, as well as their associations.

Model Links

A model can be described declaratively using a <code>link</code>. In the example code below, We ask the ViewModel to construct a record of type User with id: 17. The model will be loaded from the server and the bindings will trigger once the load has completed. Similarly, we could also attach a model instance to the ViewModel data directly.

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name']
});

var rec = new MyApp.model.User({
    id: 12,
    name: 'Foo'
});

var viewModel new Ext.app.ViewModel({
    links: {
        theUser: {
            type: 'User',
            id: 17
        }
    },
    data: {
        otherUser: rec
    }
});
viewModel.bind('{theUser.name}', function(v) {
    console.log(v);
});
viewModel.bind('{otherUser.name}', function(v) {
    console.log(v);
});

Model Fields

Bindings have the functionality to inspect the parent values and resolve the underlying value dynamically. This behavior allows model fields to be interrogated as part of a binding.

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'age']
});

var viewModel = new Ext.app.ViewModel({
    links: {
        theUser: {
            type: 'User',
            type: 22
        }
    }
});

// Server responds with:
{
    "id": 22,
    "name": "Foo",
    "age": 100
}

viewModel.bind('Hello {name}, you are {age} years old', function(v) {
    console.log(v);
});

Associations

In the same way as fields, the bindings can also traverse associations in a bind statement. The ViewModel will handle the asynchronous loading of data and only present the value once the full path has been loaded. For more information on associations see OneToOne and ManyToOne associations.

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['name']
});

Ext.define('Order', {
    extend: 'Ext.data.Model',
    fields: ['date', {
        name: 'userId',
        reference: 'User'
    }]
});

Ext.define('OrderItem', {
    extend: 'Ext.data.Model',
    fields: ['price', 'qty', {
        name: 'orderId',
        reference: 'Order'
    }]
});

var viewModel = new Ext.app.ViewModel({
    links: {
        orderItem: {
            type: 'OrderItem',
            id: 13
        }
    }
});
// The viewmodel will handle both ways of loading the data:
// a) If the data is loaded inline in a nested fashion it will
//    not make requests for extra data
// b) Only loading a single model at a time. So the Order will be loaded once
//    the OrderItem returns. The User will be loaded once the Order loads.
viewModel.bind('{orderItem.order.user.name}', function(name) {
    console.log(name);
});

Stores

Stores can be created as part of the ViewModel definition. The definitions are processed like bindings which allows for very powerful dynamic functionality.

var viewModel = new Ext.app.ViewModel({
    stores: {
        users: {
            model: 'User',
            autoLoad: true,
            filters: [{
                property: 'createdDate',
                value: '{createdFilter}',
                operator: '>'
            }]
        }
    }
});
// Later on in our code, we set the date so that the store is created.
viewModel.set('createdFilter', Ext.Date.subtract(new Date(), Ext.Date.DAY, 7));

See stores for more detail.

Formulas

Formulas allow for calculated ViewModel data values. The dependencies for these formulas are automatically determined so that the formula will not be processed until the required data is present.

var viewModel = new Ext.app.ViewModel({ formulas: { fullName: function(get) { return get('firstName') + ' ' + get('lastName'); } }, data: {firstName: 'John', lastName: 'Smith'} });

viewModel.bind('{fullName}', function(v) { console.log(v); });

See formulas for more detail.

Defined By

Config options

Ext.app.ViewModel
view source
: Object
This object holds the arbitrary data that populates the ViewModel and is then available for binding. ...

This object holds the arbitrary data that populates the ViewModel and is then available for binding.

Defaults to: true

Available since: 5.0.0

Ext.app.ViewModel
view source
: Object
An object that defines named values whose value is managed by function calls. ...

An object that defines named values whose value is managed by function calls. The names of the properties of this object are assigned as values in the ViewModel.

For example:

 formulas: {
     xy: function (get) { return get('x') * get('y'); }
 }

For more details about defining a formula, see Ext.app.bind.Formula.

Available since: 5.0.0

Ext.app.ViewModel
view source
: Ext.app.ViewModelreadonly
The parent ViewModel of this ViewModel. ...

The parent ViewModel of this ViewModel. Once set, this cannot be changed.

Available since: 5.0.0

Ext.app.ViewModel
view source
: Ext.app.bind.RootStubprivate
A reference to the root "stub" (an object that manages bindings). ...

A reference to the root "stub" (an object that manages bindings).

Defaults to: true

Available since: 5.0.0

Ext.app.ViewModel
view source
: Ext.util.Schedulerprivatereadonly
The scheduler used to schedule and manage the delivery of notifications for all connections to this ViewModel and any...

The scheduler used to schedule and manage the delivery of notifications for all connections to this ViewModel and any other attached to it. The normal process to initialize the scheduler is to get the scheduler used by the parent or session and failing either of those, create one.

Available since: 5.0.0

The schema to use for getting information about entities. ...

The schema to use for getting information about entities.

Defaults to: 'default'

The session used to manage the data model (records and stores).

The session used to manage the data model (records and stores).

Available since: 5.0.0

Ext.app.ViewModel
view source
: Object
A declaration of Ext.data.Store configurations that are first processed as binds to produce an effective store config...

A declaration of Ext.data.Store configurations that are first processed as binds to produce an effective store configuration.

A simple store definition. We can reference this in our bind statements using the {users} as we would with other data values.

new Ext.app.ViewModel({
    stores: {
        users: {
            model: 'User',
            autoLoad: true
        }
    }
});

This store definition contains a dynamic binding. The store will not be created until the initial value for groupId is set. Once that occurs, the store is created with the appropriate filter configuration. Subsequently, once we change the group value, the old filter will be overwritten with the new value.

var viewModel = new Ext.app.ViewModel({
    stores: {
        users: {
            model: 'User',
            filters: [{
                property: 'groupId',
                value: '{groupId}'
            }]
        }
    }
});
viewModel.set('groupId', 1); // This will trigger the store creation with the filter.
viewModel.set('groupId', 2); // The filter value will be changed.

This store uses store chaining to create a store backed by the data in another store. By specifying a string as the store, it will bind our creation and backing to the other store. This functionality is especially useful when wanting to display a different "view" of a store, for example a different sort order or different filters.

var viewModel = new Ext.app.ViewModel({
    stores: {
        allUsers: {
            model: 'User',
            autoLoad: true
        },
        children: {
            source: '{allUsers}',
            filters: [{
                property: 'age',
                value: 18,
                operator: '<'
            }]
        }
    }
});

Available since: 5.0.0

The Container that owns this ViewModel instance.

The Container that owns this ViewModel instance.

Available since: 5.0.0

Properties

Defined By

Instance properties

...

Defaults to: 'Ext.Base'

The value true causes config values to be stored on instances using a property name prefixed with an underscore ("_")...

The value true causes config values to be stored on instances using a property name prefixed with an underscore ("_") character. A value of false stores config values as properties using their exact name (no prefix).

Defaults to: false

Available since: 5.0.0

Overrides: Ext.Component.$configPrefixed, Ext.data.AbstractStore.$configPrefixed, Ext.layout.Layout.$configPrefixed, Ext.layout.container.boxOverflow.None.$configPrefixed

Ext.app.ViewModel
view source
: Booleanprivate
The value true instructs the initConfig method to only honor values for properties declared in the config block of a ...

The value true instructs the initConfig method to only honor values for properties declared in the config block of a class. When false, properties that are not declared in a config block will be placed on the instance.

Defaults to: false

Overrides: Ext.Base.$configStrict

Ext.app.ViewModel
view source
: Numberprivate
...

Defaults to: 100

Ext.app.ViewModel
view source
: Objectprivatereadonly
This object holds all of the properties of this ViewModel. ...

This object holds all of the properties of this ViewModel. It is prototype chained to the linkData which is, in turn, prototype chained to (if present) the data object of the parent ViewModel.

Available since: 5.0.0

Ext.app.ViewModel
view source
: Booleanprivate
...

Defaults to: false

Ext.app.ViewModel
view source
: RegExpprivate
...

Defaults to: /^(?:\{[!]?(?:(\d+)|([a-z_][\w\-\.]*))\})$/i

Ext.app.ViewModel
view source
: Object
If this property is specified by the target class of this mixin its properties are used to configure the created Ext....

If this property is specified by the target class of this mixin its properties are used to configure the created Ext.Factory.

Defaults to: {name: 'viewModel'}

Overrides: Ext.mixin.Factoryable.factoryConfig

...

Defaults to: /\.|[^\w\-]/g

This property is set to true during the call to initConfig. ...

This property is set to true during the call to initConfig.

Defaults to: false

Available since: 5.0.0

This property is set to true if this instance is the first of its class. ...

This property is set to true if this instance is the first of its class.

Defaults to: false

Available since: 5.0.0

This value is true and is used to identify plain objects from instances of a defined class. ...

This value is true and is used to identify plain objects from instances of a defined class.

Defaults to: true

Ext.app.ViewModel
view source
: Booleanprivate
also configures Factoryable ...

also configures Factoryable

Defaults to: true

Ext.app.ViewModel
view source
: Objectprivatereadonly
This object is used to hold the result of a linked value. ...

This object is used to hold the result of a linked value. This is done so that the data object hasOwnProperty equates to whether or not this property is owned by this instance or inherited.

Available since: 5.0.0

Ext.app.ViewModel
view source
: Objectprivate


Get the reference to the current class from which this object was instantiated. ...

Get the reference to the current class from which this object was instantiated. Unlike statics, this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics for a detailed comparison

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); // dependent on 'this'
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat'
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'
Defined By

Static properties

...

Defaults to: []

Methods

Defined By

Instance methods

Ext.app.ViewModel
view source
new( config ) : Ext.app.ViewModel
...

Parameters

Returns

Fires

    ( deprecations )private
    This method applies a versioned, deprecation declaration to this class. ...

    This method applies a versioned, deprecation declaration to this class. This is typically called by the deprecated config.

    Parameters

    Ext.app.ViewModel
    view source
    ( descriptor, callback, [scope], [options] ) : Ext.app.bind.BaseBinding/Ext.app.bind.Binding
    This method requests that data in this ViewModel be delivered to the specified callback. ...

    This method requests that data in this ViewModel be delivered to the specified callback. The data desired is given in a "bind descriptor" which is the first argument.

    Parameters

    • descriptor : String/Object/Array

      The bind descriptor. See class description for details.

    • callback : Function

      The function to call with the value of the bound property.

    • scope : Object (optional)

      The scope (this pointer) for the callback.

    • options : Object (optional)

    Returns

    Fires

      ( args ) : Objectdeprecatedprotected
      Call the original method that was previously overridden with override Ext.define('My.Cat', { constructor: functi...

      Call the original method that was previously overridden with override

      Ext.define('My.Cat', {
          constructor: function() {
              alert("I'm a cat!");
          }
      });
      
      My.Cat.override({
          constructor: function() {
              alert("I'm going to be a cat!");
      
              this.callOverridden();
      
              alert("Meeeeoooowwww");
          }
      });
      
      var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                                // alerts "I'm a cat!"
                                // alerts "Meeeeoooowwww"
      

      This method has been deprecated

      Use callParent instead.

      Parameters

      • args : Array/Arguments

        The arguments, either an array or the arguments object from the current method, for example: this.callOverridden(arguments)

      Returns

      • Object

        Returns the result of calling the overridden method

      Call the "parent" method of the current method. ...

      Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).

       Ext.define('My.Base', {
           constructor: function (x) {
               this.x = x;
           },
      
           statics: {
               method: function (x) {
                   return x;
               }
           }
       });
      
       Ext.define('My.Derived', {
           extend: 'My.Base',
      
           constructor: function () {
               this.callParent([21]);
           }
       });
      
       var obj = new My.Derived();
      
       alert(obj.x);  // alerts 21
      

      This can be used with an override as follows:

       Ext.define('My.DerivedOverride', {
           override: 'My.Derived',
      
           constructor: function (x) {
               this.callParent([x*2]); // calls original My.Derived constructor
           }
       });
      
       var obj = new My.Derived();
      
       alert(obj.x);  // now alerts 42
      

      This also works with static methods.

       Ext.define('My.Derived2', {
           extend: 'My.Base',
      
           statics: {
               method: function (x) {
                   return this.callParent([x*2]); // calls My.Base.method
               }
           }
       });
      
       alert(My.Base.method(10));     // alerts 10
       alert(My.Derived2.method(10)); // alerts 20
      

      Lastly, it also works with overridden static methods.

       Ext.define('My.Derived2Override', {
           override: 'My.Derived2',
      
           statics: {
               method: function (x) {
                   return this.callParent([x*2]); // calls My.Derived2.method
               }
           }
       });
      
       alert(My.Derived2.method(10); // now alerts 40
      

      To override a method and replace it and also call the superclass method, use callSuper. This is often done to patch a method to fix a bug.

      Parameters

      • args : Array/Arguments

        The arguments, either an array or the arguments object from the current method, for example: this.callParent(arguments)

      Returns

      • Object

        Returns the result of calling the parent method

      This method is used by an override to call the superclass method but bypass any overridden method. ...

      This method is used by an override to call the superclass method but bypass any overridden method. This is often done to "patch" a method that contains a bug but for whatever reason cannot be fixed directly.

      Consider:

       Ext.define('Ext.some.Class', {
           method: function () {
               console.log('Good');
           }
       });
      
       Ext.define('Ext.some.DerivedClass', {
           extend: 'Ext.some.Class',
      
           method: function () {
               console.log('Bad');
      
               // ... logic but with a bug ...
      
               this.callParent();
           }
       });
      

      To patch the bug in Ext.some.DerivedClass.method, the typical solution is to create an override:

       Ext.define('App.patches.DerivedClass', {
           override: 'Ext.some.DerivedClass',
      
           method: function () {
               console.log('Fixed');
      
               // ... logic but with bug fixed ...
      
               this.callSuper();
           }
       });
      

      The patch method cannot use callParent to call the superclass method since that would call the overridden method containing the bug. In other words, the above patch would only produce "Fixed" then "Good" in the console log, whereas, using callParent would produce "Fixed" then "Bad" then "Good".

      Parameters

      • args : Array/Arguments

        The arguments, either an array or the arguments object from the current method, for example: this.callSuper(arguments)

      Returns

      • Object

        Returns the result of calling the superclass method

      Ext.app.ViewModel
      view source
      ( )protected
      This method is called to cleanup an object and its resources. ...

      This method is called to cleanup an object and its resources. After calling this method, the object should not be used any further.

      Fires

        Overrides: Ext.util.ElementContainer.destroy, Ext.state.Stateful.destroy, Ext.Component.destroy, Ext.mixin.Observable.destroy, Ext.data.AbstractStore.destroy, Ext.Base.destroy, Ext.plugin.Abstract.destroy, Ext.draw.sprite.Sprite.destroy, Ext.app.BaseController.destroy

        Ext.app.ViewModel
        view source
        ( path ) : Object
        Get a value from the data for this viewmodel. ...

        Get a value from the data for this viewmodel.

        Parameters

        • path : String

          The path of the data to retrieve.

          var value = vm.get('theUser.address.city');

        Returns

        • Object

          The data stored at the passed path.

        Fires

          Returns a specified config property value. ...

          Returns a specified config property value. If the name parameter is not passed, all current configuration options will be returned as key value pairs.

          Parameters

          • name : String (optional)

            The name of the config property to get.

          • peek : Boolean (optional)

            true to peek at the raw value without calling the getter.

            Defaults to: false

          Returns

          • Object

            The config property value.

          Ext.app.ViewModel
          view source
          ( ) : Object
          Returns the value of data. ...

          Returns the value of data.

          Available since: 5.0.0

          Returns

          Ext.app.ViewModel
          view source
          ( ) : Object
          Returns the value of formulas. ...

          Returns the value of formulas.

          Available since: 5.0.0

          Returns

          Retrieves the id of this component. ...

          Retrieves the id of this component. Will autogenerate an id if one has not already been set.

          Returns

          Fires

            Returns the initial configuration passed to constructor when instantiating this class. ...

            Returns the initial configuration passed to constructor when instantiating this class.

            Parameters

            • name : String (optional)

              Name of the config option to return.

            Returns

            • Object/Mixed

              The full config object or a single config value when name parameter specified.

            Ext.app.ViewModel
            view source
            ( ) : Ext.app.ViewModelreadonly
            Returns the value of parent. ...

            Returns the value of parent.

            Available since: 5.0.0

            Returns

            Ext.app.ViewModel
            view source
            ( type, id ) : Ext.data.Modelprivate
            Get a record instance given a reference descriptor. ...

            Get a record instance given a reference descriptor. Will ask the session if one exists.

            Parameters

            Returns

            Fires

              Ext.app.ViewModel
              view source
              ( ) : Ext.app.bind.RootStubprivate
              Returns the value of root. ...

              Returns the value of root.

              Available since: 5.0.0

              Returns

              Ext.app.ViewModel
              view source
              ( ) : Ext.util.Schedulerprivatereadonly
              Returns the value of scheduler. ...

              Returns the value of scheduler.

              Available since: 5.0.0

              Returns

              Returns the value of schema. ...

              Returns the value of schema.

              Returns

              Gets the session attached to this (or a parent) ViewModel. ...

              Gets the session attached to this (or a parent) ViewModel. See the session configuration.

              Returns

              Fires

                Ext.app.ViewModel
                view source
                ( key ) : Ext.data.Store
                Gets a store configured via the stores configuration. ...

                Gets a store configured via the stores configuration.

                Parameters

                • key : String

                  The name of the store.

                Returns

                Ext.app.ViewModel
                view source
                ( ) : Object
                Returns the value of stores. ...

                Returns the value of stores.

                Available since: 5.0.0

                Returns

                Ext.app.ViewModel
                view source
                ( bindDescr ) : Ext.app.bind.AbstractStubprivate
                This method looks up the Stub for a single bind descriptor. ...

                This method looks up the Stub for a single bind descriptor.

                Parameters

                Returns

                Fires

                  Returns the value of view. ...

                  Returns the value of view.

                  Available since: 5.0.0

                  Returns

                  ...

                  Parameters

                  ( config ) : Ext.Basechainableprotected
                  Initialize configuration for this class. ...

                  Initialize configuration for this class. a typical example:

                  Ext.define('My.awesome.Class', {
                      // The default config
                      config: {
                          name: 'Awesome',
                          isAwesome: true
                      },
                  
                      constructor: function(config) {
                          this.initConfig(config);
                      }
                  });
                  
                  var awesome = new My.awesome.Class({
                      name: 'Super Awesome'
                  });
                  
                  alert(awesome.getName()); // 'Super Awesome'
                  

                  Parameters

                  Returns

                  Fires

                    Ext.app.ViewModel
                    view source
                    ( key, reference )
                    Create a link to a reference. ...

                    Create a link to a reference. See the links configuration.

                    Parameters

                    • key : String

                      The name for the link.

                    • reference : Object

                      The reference descriptor.

                    Fires

                      Ext.app.ViewModel
                      view source
                      ( )private
                      ...

                      Fires

                        ...

                        Parameters

                        Ext.app.ViewModel
                        view source
                        ( path, The )
                        Set a value in the data for this viewmodel. ...

                        Set a value in the data for this viewmodel.

                        Parameters

                        • path : Object/String

                          The path of the value to set, or an object literal to set at the root of the viewmodel.

                        • The : Object

                          data to set at the value. If the value is an object literal, any required paths will be created.

                          // Set a single property at the root level viewModel.set('expiry', Ext.Date.add(new Date(), Ext.Date.DAY, 7)); console.log(viewModel.get('expiry')); // Sets a single property in user.address, does not overwrite any hierarchy. viewModel.set('user.address.city', 'London'); console.log(viewModel.get('user.address.city')); // Sets 2 properties of "user". Overwrites any existing hierarchy. viewModel.set('user', {firstName: 'Foo', lastName: 'Bar'}); console.log(viewModel.get('user.firstName')); // Sets a single property at the root level. Overwrites any existing hierarchy. viewModel.set({rootKey: 1}); console.log(viewModel.get('rootKey'));

                        Fires

                          ( name, [value] ) : Ext.Basechainable
                          Sets a single/multiple configuration options. ...

                          Sets a single/multiple configuration options.

                          Parameters

                          • name : String/Object

                            The name of the property to set, or a set of key value pairs to set.

                          • value : Object (optional)

                            The value to set for the name parameter.

                          Returns

                          Fires

                            Ext.app.ViewModel
                            view source
                            ( data )
                            Sets the value of data. ...

                            Sets the value of data.

                            Available since: 5.0.0

                            Parameters

                            Ext.app.ViewModel
                            view source
                            ( formulas )
                            Sets the value of formulas. ...

                            Sets the value of formulas.

                            Available since: 5.0.0

                            Parameters

                            ...

                            Parameters

                            Ext.app.ViewModel
                            view source
                            ( parent )readonly
                            Sets the value of parent. ...

                            Sets the value of parent.

                            Available since: 5.0.0

                            Parameters

                            Ext.app.ViewModel
                            view source
                            ( root )private
                            Sets the value of root. ...

                            Sets the value of root.

                            Available since: 5.0.0

                            Parameters

                            Ext.app.ViewModel
                            view source
                            ( scheduler )privatereadonly
                            Sets the value of scheduler. ...

                            Sets the value of scheduler.

                            Available since: 5.0.0

                            Parameters

                            Ext.app.ViewModel
                            view source
                            ( schema )
                            Sets the value of schema. ...

                            Sets the value of schema.

                            Parameters

                            Ext.app.ViewModel
                            view source
                            ( session )
                            Sets the value of session. ...

                            Sets the value of session.

                            Available since: 5.0.0

                            Parameters

                            Ext.app.ViewModel
                            view source
                            ( stores )
                            Sets the value of stores. ...

                            Sets the value of stores.

                            Available since: 5.0.0

                            Parameters

                            Ext.app.ViewModel
                            view source
                            ( view )
                            Sets the value of view. ...

                            Sets the value of view.

                            Available since: 5.0.0

                            Parameters

                            Get the reference to the class from which this object was instantiated. ...

                            Get the reference to the class from which this object was instantiated. Note that unlike self, this.statics() is scope-independent and it always returns the class from which it was called, regardless of what this points to during run-time

                            Ext.define('My.Cat', {
                                statics: {
                                    totalCreated: 0,
                                    speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
                                },
                            
                                constructor: function() {
                                    var statics = this.statics();
                            
                                    alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
                                                                    // equivalent to: My.Cat.speciesName
                            
                                    alert(this.self.speciesName);   // dependent on 'this'
                            
                                    statics.totalCreated++;
                                },
                            
                                clone: function() {
                                    var cloned = new this.self();   // dependent on 'this'
                            
                                    cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
                            
                                    return cloned;
                                }
                            });
                            
                            
                            Ext.define('My.SnowLeopard', {
                                extend: 'My.Cat',
                            
                                statics: {
                                    speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
                                },
                            
                                constructor: function() {
                                    this.callParent();
                                }
                            });
                            
                            var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
                            
                            var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
                            
                            var clone = snowLeopard.clone();
                            alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
                            alert(clone.groupName);                 // alerts 'Cat'
                            
                            alert(My.Cat.totalCreated);             // alerts 3
                            

                            Returns

                            Defined By

                            Static methods

                            ( config, [mixinClass] )privatestatic
                            Adds new config properties to this class. ...

                            Adds new config properties to this class. This is called for classes when they are declared, then for any mixins that class may define and finally for any overrides defined that target the class.

                            Parameters

                            • config : Object
                            • mixinClass : Class (optional)

                              The mixin class if the configs are from a mixin.

                            ( members )chainableprivatestatic
                            ...

                            Parameters

                            ( name, member )chainableprivatestatic
                            ...

                            Parameters

                            ( members, [isStatic], [privacy] )chainablestatic
                            Add methods / properties to the prototype of this class. ...

                            Add methods / properties to the prototype of this class.

                            Ext.define('My.awesome.Cat', {
                                constructor: function() {
                                    ...
                                }
                            });
                            
                             My.awesome.Cat.addMembers({
                                 meow: function() {
                                    alert('Meowww...');
                                 }
                             });
                            
                             var kitty = new My.awesome.Cat();
                             kitty.meow();
                            

                            Parameters

                            • members : Object

                              The members to add to this class.

                            • isStatic : Boolean (optional)

                              Pass true if the members are static.

                              Defaults to: false

                            • privacy : Boolean (optional)

                              Pass true if the members are private. This only has meaning in debug mode and only for methods.

                              Defaults to: false

                            ( members ) : Ext.Basechainablestatic
                            Add / override static properties of this class. ...

                            Add / override static properties of this class.

                            Ext.define('My.cool.Class', {
                                ...
                            });
                            
                            My.cool.Class.addStatics({
                                someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
                                method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
                                method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
                            });
                            

                            Parameters

                            Returns

                            ( fromClass, members ) : Ext.Baseprivatestatic
                            Borrow another class' members to the prototype of this class. ...

                            Borrow another class' members to the prototype of this class.

                            Ext.define('Bank', {
                                money: '$$$',
                                printMoney: function() {
                                    alert('$$$$$$$');
                                }
                            });
                            
                            Ext.define('Thief', {
                                ...
                            });
                            
                            Thief.borrow(Bank, ['money', 'printMoney']);
                            
                            var steve = new Thief();
                            
                            alert(steve.money); // alerts '$$$'
                            steve.printMoney(); // alerts '$$$$$$$'
                            

                            Parameters

                            • fromClass : Ext.Base

                              The class to borrow members from

                            • members : Array/String

                              The names of the members to borrow

                            Returns

                            ( args )protectedstatic
                            ...

                            Parameters

                            ( args )protectedstatic
                            ...

                            Parameters

                            Create a new instance of this Class. ...

                            Create a new instance of this Class.

                            Ext.define('My.cool.Class', {
                                ...
                            });
                            
                            My.cool.Class.create({
                                someConfig: true
                            });
                            

                            All parameters are passed to the constructor of the class.

                            Returns

                            ( alias, origin )static
                            Create aliases for existing prototype methods. ...

                            Create aliases for existing prototype methods. Example:

                            Ext.define('My.cool.Class', {
                                method1: function() { ... },
                                method2: function() { ... }
                            });
                            
                            var test = new My.cool.Class();
                            
                            My.cool.Class.createAlias({
                                method3: 'method1',
                                method4: 'method2'
                            });
                            
                            test.method3(); // test.method1()
                            
                            My.cool.Class.createAlias('method5', 'method3');
                            
                            test.method5(); // test.method3() -> test.method1()
                            

                            Parameters

                            ( config )privatestatic
                            ...

                            Parameters

                            Returns the Ext.Configurator for this class. ...

                            Returns the Ext.Configurator for this class.

                            Returns

                            Get the current class' name in string format. ...

                            Get the current class' name in string format.

                            Ext.define('My.cool.Class', {
                                constructor: function() {
                                    alert(this.self.getName()); // alerts 'My.cool.Class'
                                }
                            });
                            
                            My.cool.Class.getName(); // 'My.cool.Class'
                            

                            Returns

                            ( name, mixinClass )privatestatic
                            Used internally by the mixins pre-processor ...

                            Used internally by the mixins pre-processor

                            Parameters

                            ( fn, scope )chainableprivatestatic
                            ...

                            Parameters

                            Override members of this class. ...

                            Override members of this class. Overridden methods can be invoked via callParent.

                            Ext.define('My.Cat', {
                                constructor: function() {
                                    alert("I'm a cat!");
                                }
                            });
                            
                            My.Cat.override({
                                constructor: function() {
                                    alert("I'm going to be a cat!");
                            
                                    this.callParent(arguments);
                            
                                    alert("Meeeeoooowwww");
                                }
                            });
                            
                            var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                                                      // alerts "I'm a cat!"
                                                      // alerts "Meeeeoooowwww"
                            

                            Direct use of this method should be rare. Use Ext.define instead:

                            Ext.define('My.CatOverride', {
                                override: 'My.Cat',
                                constructor: function() {
                                    alert("I'm going to be a cat!");
                            
                                    this.callParent(arguments);
                            
                                    alert("Meeeeoooowwww");
                                }
                            });
                            

                            The above accomplishes the same result but can be managed by the Ext.Loader which can properly order the override and its target class and the build process can determine whether the override is needed based on the required state of the target class (My.Cat).

                            Parameters

                            • members : Object

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

                            Returns