Files

Guide

A Model represents some object that your application manages. For example, one might define a Model for Users,
Products, Cars, or any other real-world object that we want to model in the system. Models are registered via the
model manager, and are used by stores, which are in turn used by many
of the data-bound components in Ext.

Models are defined as a set of fields and any arbitrary methods and properties relevant to the model. For example:

Associations

Models can have associations with other Models via Ext.data.association.HasOne,
belongsTo and hasMany associations.
For example, let's say we're writing a blog administration application which deals with Users, Posts and Comments.
We can express the relationships between these models like this:

Using a Proxy

Models are great for representing types of data and relationships, but sooner or later we're going to want to load or
save that data somewhere. All loading and saving of data is handled via a Proxy, which
can be set directly on the Model:

Calling save on the new Model instance tells the configured RestProxy that we wish to persist this Model's
data onto our server. RestProxy figures out that this Model hasn't been saved before because it doesn't have an id,
and performs the appropriate action - in this case issuing a POST request to the url we configured (/users). We
configure any Proxy on any Model and always follow this API - see Ext.data.proxy.Proxy for a full list.

//the user Model we loaded in the last snippet:
user.set('name', 'Edward Spencer');
//tells the Proxy to save the Model. In this case it will perform a PUT request to /users/123 as this Model already has an id
user.save({
success: function() {
console.log('The User was updated');
}
});
//tells the Proxy to destroy the Model. Performs a DELETE request to /users/123
user.erase({
success: function() {
console.log('The User was destroyed!');
}
});

Usage in Stores

It is very common to want to load a set of Model instances to be displayed and manipulated in the UI. We do this by
creating a Store:

var store = Ext.create('Ext.data.Store', {
model: 'User'
});
//uses the Proxy we set up on Model to load the Store data
store.load();

A Store is just a collection of Model instances - usually loaded from a server somewhere. Store can also maintain a
set of added, updated and removed Model instances to be synchronized with the server via the Proxy. See the Store docs for more information on Stores.

The name of a property that is used for submitting this Model's unique client-side identifier
to the server when mult...

The name of a property that is used for submitting this Model's unique client-side identifier
to the server when multiple phantom records are saved as part of the same Operation.
In such a case, the server response should include the client id for each record
so that the server response data can be used to update the client-side records if necessary.
This property cannot have the same name as any of this Model's fields.
Defaults to 'clientId'.

The name of the field treated as this Model's unique id. Defaults to 'id'. Note that this field
needs to have a type of 'auto'. Setting the field type to anything else will be undone by the
framework. This is because new records that are created without an id, will have one generated.
This generated id is a string.

The identifier strategy used when creating new instances of this Model that don't have an id defined. ...

The identifier strategy used when creating new instances of this Model that don't have an id defined.
By default this uses the simple identifier strategy that generates id's like 'ext-record-12'. If you are
saving these records in localstorage using a LocalStorage proxy you need to ensure that this identifier
strategy is set to something that always generates unique id's. We provide one strategy by default that
generates these unique id's which is the uuid strategy.

A config object containing one or more event handlers to be added to this object during initialization. ...

A config object containing one or more event handlers to be added to this object during initialization. This
should be a valid listeners config object as specified in the addListener example for attaching
multiple handlers at once.

The raw data used to create this model if created via a reader.

The raw data used to create this model if created via a reader.

Available since: 2.0.0

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

Allows you to add a listener onto a element of this component using the elements reference.

All components have the element reference, which is the outer most element of the component. Ext.Container also has the
innerElement element which contains all children. In most cases element is adequate.

delegate : String

Uses Ext.ComponentQuery to delegate events to a specified query selector within this item.

Parameters

True to not notify the store of the change

Array of field names changed during edit.

Fires

Destroys the record using the configured proxy. ...

Destroys the record using the configured proxy. This will create a 'destroy' operation.
Note that this doesn't destroy this instance after the server comes back with a response.
It will however call afterErase on any Stores it is joined to. Stores by default will
automatically remove this instance from their data collection.

Available since: 2.0.0

Parameters

Options to pass to the proxy. Config object for Ext.data.Operation.
If you pass a function, this will automatically become the callback method. For convenience the config
object may also contain success and failure methods in addition to callback - they will all be invoked
with the Model and Operation as arguments.

Returns the value of the given field ...

Returns the value of the given field

Available since: 1.1.0

Parameters

The field to fetch the value for

Returns

The value

Gets all of the data from this Models loaded associations. ...

Gets all of the data from this Models loaded associations. It does this recursively - for example if we have a
User which hasMany Orders, and each Order hasMany OrderItems, it will return an object like this:

...

Available since: 2.0.0

Parameters

...

Available since: 2.0.0

Returns an object containing the data set on this record. ...

Returns an object containing the data set on this record. This method also allows you to
retrieve all the associated data. Note that if you should always use this method if you
need all the associated data, since the data property on the record instance is not
ensured to be updated at all times.

Checks if the model is valid. ...

Available since: 2.0.0

Returns

True if the model is valid.

Fires

By joining this model to an instance of a class, this model will automatically try to
call certain template methods o...

By joining this model to an instance of a class, this model will automatically try to
call certain template methods on that instance (afterEdit, afterCommit, afterErase).
For example, a Store calls join and unjoin whenever you add or remove a record to it's data collection.
This way a Store can get notified of any changes made to this record.
This functionality is usually only required when creating custom components.

The store to which this model has been added.

...

Available since: 1.1.0

Private function that is used when you create a record that already exists in the model cache. ...

Private function that is used when you create a record that already exists in the model cache.
In this case we loop over each field, and apply any data to the current instance that is not already
marked as being dirty on that instance.

If the eventName parameter was an event name, this is the handler function.

If the eventName parameter was an event name, this is the scope in which
the handler function is executed.

Helper function used by afterEdit, afterReject and afterCommit. ...

Helper function used by afterEdit, afterReject and afterCommit. Calls the given method on the
store that this instance has joined, if any. The store function
will always be called with the model instance as its single argument.

Allows you to add a listener onto a element of this component using the elements reference.

All components have the element reference, which is the outer most element of the component. Ext.Container also has the
innerElement element which contains all children. In most cases element is adequate.

delegate : String

Uses Ext.ComponentQuery to delegate events to a specified query selector within this item.

PRIVATE. The set of Model instance internalIds that have already been loaded

The name of the type of association to limit to.

Returns

The nested data set for the Model's loaded associations

Fires

Usually called by the Ext.data.Store to which this model instance has been joined. ...

Usually called by the Ext.data.Store to which this model instance has been joined. Rejects
all changes made to the model instance since either creation, or the last commit operation. Modified fields are
reverted to their original values.

Developers should subscribe to the Ext.data.Store.update event to have their code notified of reject
operations.

Saves the model instance using the configured proxy. ...

Saves the model instance using the configured proxy.

Available since: 1.1.0

Parameters

Options to pass to the proxy. Config object for Ext.data.Operation.
If you pass a function, this will automatically become the callback method. For convenience the config
object may also contain success and failure methods in addition to callback - they will all be invoked
with the Model and Operation as arguments.

...

Available since: 2.0.0

Parameters

Returns

this

This sets the data directly without converting and applying default values. ...

This sets the data directly without converting and applying default values.
This method is used when a Record gets instantiated by a Reader. Only use
this when you are sure you are passing correctly converted data.

Available since: 2.0.0

Parameters

Returns

this This Record

This method is used to set the data for this Record instance. ...

This method is used to set the data for this Record instance.
Note that the existing data is removed. If a field is not specified
in the passed data it will use the field's default value. If a convert
method is specified for the field it will be called on the value.

Available since: 1.1.0

Fires

Updates the collection of Fields that all instances of this Model use. ...

Updates the collection of Fields that all instances of this Model use. Does not update field values in a Model
instance (use set for that), instead this updates which fields are available on the Model class. This
is normally used when creating or updating Model definitions dynamically, for example if you allow your users to
define their own Models and save the fields configuration to a database, this method allows you to change those
fields later.

This method is being used to sort the fields based on their convert method. If
a field has a custom convert method, we ensure its more to the bottom of the collection.

Available since: 2.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

Parameters

Pass as true to queue up suspended events to be fired
after the resumeEvents call instead of discarding all suspended events.

Returns a url-suitable string for this model instance. ...

Returns a url-suitable string for this model instance. By default this just returns the name of the Model class
followed by the instance ID - for example an instance of MyApp.model.User with ID 123 will return 'user/123'.

As of 4.1, direct use of this method is deprecated. Use Ext.define
instead:

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