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 {@link Ext.ModelManager model manager}, - * and are used by {@link Ext.data.Store stores}, which are in turn used by many of the data-bound components in Ext.
+ * 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 + * {@link Ext.ModelManager model manager}, and are used by {@link Ext.data.Store 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:
+ * Models are defined as a set of fields and any arbitrary methods and properties relevant to the model. For example: * -
-Ext.define('User', {
- extend: 'Ext.data.Model',
- fields: [
- {name: 'name', type: 'string'},
- {name: 'age', type: 'int'},
- {name: 'phone', type: 'string'},
- {name: 'alive', type: 'boolean', defaultValue: true}
- ],
-
- changeName: function() {
- var oldName = this.get('name'),
- newName = oldName + " The Barbarian";
-
- this.set('name', newName);
- }
-});
-The fields array is turned into a {@link Ext.util.MixedCollection MixedCollection} automatically by the {@link Ext.ModelManager ModelManager}, and all -* other functions and properties are copied to the new Model's prototype.
-* -*Now we can create instances of our User model and call any model logic we defined:
-* -
-var user = Ext.ModelManager.create({
- name : 'Conan',
- age : 24,
- phone: '555-555-5555'
-}, 'User');
-
-user.changeName();
-user.get('name'); //returns "Conan The Barbarian"
-Validations
+ * changeName: function() { + * var oldName = this.get('name'), + * newName = oldName + " The Barbarian"; * - *Models have built-in support for validations, which are executed against the validator functions in - * {@link Ext.data.validations} ({@link Ext.data.validations see all validation functions}). Validations are easy to add to models:
+ * this.set('name', newName); + * } + * }); * -
-Ext.define('User', {
- extend: 'Ext.data.Model',
- fields: [
- {name: 'name', type: 'string'},
- {name: 'age', type: 'int'},
- {name: 'phone', type: 'string'},
- {name: 'gender', type: 'string'},
- {name: 'username', type: 'string'},
- {name: 'alive', type: 'boolean', defaultValue: true}
- ],
-
- validations: [
- {type: 'presence', field: 'age'},
- {type: 'length', field: 'name', min: 2},
- {type: 'inclusion', field: 'gender', list: ['Male', 'Female']},
- {type: 'exclusion', field: 'username', list: ['Admin', 'Operator']},
- {type: 'format', field: 'username', matcher: /([a-z]+)[0-9]{2,3}/}
- ]
-});
-The validations can be run by simply calling the {@link #validate} function, which returns a {@link Ext.data.Errors} - * object:
+ * Now we can create instances of our User model and call any model logic we defined: * -
-var instance = Ext.ModelManager.create({
- name: 'Ed',
- gender: 'Male',
- username: 'edspencer'
-}, 'User');
-
-var errors = instance.validate();
-Associations
+ * user.changeName(); + * user.get('name'); //returns "Conan The Barbarian" * - *Models can have associations with other Models via {@link Ext.data.BelongsToAssociation belongsTo} and - * {@link Ext.data.HasManyAssociation 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:
+ * # Validations * -
-Ext.define('Post', {
- extend: 'Ext.data.Model',
- fields: ['id', 'user_id'],
-
- belongsTo: 'User',
- hasMany : {model: 'Comment', name: 'comments'}
-});
-
-Ext.define('Comment', {
- extend: 'Ext.data.Model',
- fields: ['id', 'user_id', 'post_id'],
-
- belongsTo: 'Post'
-});
-
-Ext.define('User', {
- extend: 'Ext.data.Model',
- fields: ['id'],
-
- hasMany: [
- 'Post',
- {model: 'Comment', name: 'comments'}
- ]
-});
-See the docs for {@link Ext.data.BelongsToAssociation} and {@link Ext.data.HasManyAssociation} for details on the usage - * and configuration of associations. Note that associations can also be specified like this:
+ * Ext.define('User', { + * extend: 'Ext.data.Model', + * fields: [ + * {name: 'name', type: 'string'}, + * {name: 'age', type: 'int'}, + * {name: 'phone', type: 'string'}, + * {name: 'gender', type: 'string'}, + * {name: 'username', type: 'string'}, + * {name: 'alive', type: 'boolean', defaultValue: true} + * ], * -
-Ext.define('User', {
- extend: 'Ext.data.Model',
- fields: ['id'],
-
- associations: [
- {type: 'hasMany', model: 'Post', name: 'posts'},
- {type: 'hasMany', model: 'Comment', name: 'comments'}
- ]
-});
-Using a Proxy
+ * The validations can be run by simply calling the {@link #validate} function, which returns a {@link Ext.data.Errors} + * object: * - *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 {@link Ext.data.proxy.Proxy Proxy}, - * which can be set directly on the Model:
+ * var instance = Ext.create('User', { + * name: 'Ed', + * gender: 'Male', + * username: 'edspencer' + * }); * -
-Ext.define('User', {
- extend: 'Ext.data.Model',
- fields: ['id', 'name', 'email'],
-
- proxy: {
- type: 'rest',
- url : '/users'
- }
-});
-Here we've set up a {@link Ext.data.proxy.Rest Rest Proxy}, which knows how to load and save data to and from a - * RESTful backend. Let's see how this works:
+ * # Associations * -
-var user = Ext.ModelManager.create({name: 'Ed Spencer', email: 'ed@sencha.com'}, 'User');
-
-user.save(); //POST /users
-Calling {@link #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 {@link Ext.data.proxy.Proxy} for a full - * list.
+ * Ext.define('Post', { + * extend: 'Ext.data.Model', + * fields: ['id', 'user_id'], * - *Loading data via the Proxy is equally easy:
+ * belongsTo: 'User', + * hasMany : {model: 'Comment', name: 'comments'} + * }); * -
-//get a reference to the User model class
-var User = Ext.ModelManager.getModel('User');
-
-//Uses the configured RestProxy to make a GET request to /users/123
-User.load(123, {
- success: function(user) {
- console.log(user.getId()); //logs 123
- }
-});
-Models can also be updated and destroyed easily:
+ * belongsTo: 'Post' + * }); * -
-//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.destroy({
- success: function() {
- console.log('The User was destroyed!');
- }
-});
-Usage in Stores
+ * hasMany: [ + * 'Post', + * {model: 'Comment', name: 'comments'} + * ] + * }); * - *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 {@link Ext.data.Store Store}:
+ * See the docs for {@link Ext.data.BelongsToAssociation} and {@link Ext.data.HasManyAssociation} for details on the + * usage and configuration of associations. Note that associations can also be specified like this: * -
-var store = new 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 - * {@link Ext.data.Store Store docs} for more information on Stores.
+ * var user = Ext.create('User', {name: 'Ed Spencer', email: 'ed@sencha.com'}); + * + * user.save(); //POST /users + * + * Calling {@link #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 {@link Ext.data.proxy.Proxy} for a full list. + * + * Loading data via the Proxy is equally easy: + * + * //get a reference to the User model class + * var User = Ext.ModelManager.getModel('User'); + * + * //Uses the configured RestProxy to make a GET request to /users/123 + * User.load(123, { + * success: function(user) { + * console.log(user.getId()); //logs 123 + * } + * }); + * + * Models can also be updated and destroyed easily: + * + * //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.destroy({ + * 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 {@link Ext.data.Store 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 {@link + * Ext.data.Store Store docs} for more information on Stores. * * @constructor + * Creates new Model instance. * @param {Object} data An object containing keys corresponding to this model's fields, and their associated values * @param {Number} id (optional) Unique ID to assign to this model instance */ Ext.define('Ext.data.Model', { alternateClassName: 'Ext.data.Record', - + mixins: { observable: 'Ext.util.Observable' }, requires: [ 'Ext.ModelManager', + 'Ext.data.IdGenerator', 'Ext.data.Field', 'Ext.data.Errors', 'Ext.data.Operation', @@ -266,6 +247,7 @@ Ext.define('Ext.data.Model', { associations = data.associations || [], belongsTo = data.belongsTo, hasMany = data.hasMany, + idgen = data.idgen, fieldsMixedCollection = new Ext.util.MixedCollection(false, function(field) { return field.name; @@ -304,6 +286,10 @@ Ext.define('Ext.data.Model', { data.fields = fieldsMixedCollection; + if (idgen) { + data.idgen = Ext.data.IdGenerator.get(idgen); + } + //associations can be specified in the more convenient format (e.g. not inside an 'associations' array). //we support that here if (belongsTo) { @@ -388,9 +374,12 @@ Ext.define('Ext.data.Model', { inheritableStatics: { /** - * Sets the Proxy to use for this model. Accepts any options that can be accepted by {@link Ext#createByAlias Ext.createByAlias} + * Sets the Proxy to use for this model. Accepts any options that can be accepted by + * {@link Ext#createByAlias Ext.createByAlias}. * @param {String/Object/Ext.data.proxy.Proxy} proxy The proxy + * @return {Ext.data.proxy.Proxy} * @static + * @inheritable */ setProxy: function(proxy) { //make sure we have an Ext.data.proxy.Proxy object @@ -411,40 +400,42 @@ Ext.define('Ext.data.Model', { /** * Returns the configured Proxy for this Model * @return {Ext.data.proxy.Proxy} The proxy + * @static + * @inheritable */ getProxy: function() { return this.proxy; }, /** - * Static. Asynchronously loads a model instance by id. Sample usage: -
- MyApp.User = Ext.define('User', {
- extend: 'Ext.data.Model',
- fields: [
- {name: 'id', type: 'int'},
- {name: 'name', type: 'string'}
- ]
- });
-
- MyApp.User.load(10, {
- scope: this,
- failure: function(record, operation) {
- //do something if the load failed
- },
- success: function(record, operation) {
- //do something if the load succeeded
- },
- callback: function(record, operation) {
- //do something whether the load succeeded or failed
- }
- });
- Ext.data.Model.PREFIX - * (defaults to 'ext-record')
Ext.data.Model.AUTO_ID - * (defaults to 1 initially)
update event)
- * are relayed to the containing store. When an edit has begun, it must be followed
- * by either {@link #endEdit} or {@link #cancelEdit}.
+ * Begins an edit. While in edit mode, no events (e.g.. the `update` event) are relayed to the containing store.
+ * When an edit has begun, it must be followed by either {@link #endEdit} or {@link #cancelEdit}.
*/
beginEdit : function(){
var me = this;
@@ -750,7 +862,7 @@ Ext.define('Ext.data.Model', {
me.modifiedSave = Ext.apply({}, me.modified);
}
},
-
+
/**
* Cancels all changes made in the current edit operation.
*/
@@ -767,28 +879,54 @@ Ext.define('Ext.data.Model', {
delete me.dirtySave;
}
},
-
+
/**
- * End an edit. If any data was modified, the containing store is notified
- * (ie, the store's update event will fire).
+ * Ends an edit. If any data was modified, the containing store is notified (ie, the store's `update` event will
+ * fire).
* @param {Boolean} silent True to not notify the store of the change
*/
endEdit : function(silent){
- var me = this;
+ var me = this,
+ didChange;
+
if (me.editing) {
me.editing = false;
+ didChange = me.dirty || me.changedWhileEditing();
delete me.modifiedSave;
delete me.dataSave;
delete me.dirtySave;
- if (silent !== true && me.dirty) {
+ if (silent !== true && didChange) {
me.afterEdit();
}
}
},
+ /**
+ * Checks if the underlying data has changed during an edit. This doesn't necessarily
+ * mean the record is dirty, however we still need to notify the store since it may need
+ * to update any views.
+ * @private
+ * @return {Boolean} True if the underlying data has changed during an edit.
+ */
+ changedWhileEditing: function(){
+ var me = this,
+ saved = me.dataSave,
+ data = me[me.persistenceProperty],
+ key;
+
+ for (key in data) {
+ if (data.hasOwnProperty(key)) {
+ if (!me.isEqual(data[key], saved[key])) {
+ return true;
+ }
+ }
+ }
+ return false;
+ },
+
/**
* Gets a hash of only the fields that have been modified since this Model was created or commited.
- * @return Object
+ * @return {Object}
*/
getChanges : function(){
var modified = this.modified,
@@ -803,30 +941,27 @@ Ext.define('Ext.data.Model', {
return changes;
},
-
+
/**
- * Returns true if the passed field name has been {@link #modified}
- * since the load or last commit.
+ * Returns true if the passed field name has been `{@link #modified}` since the load or last commit.
* @param {String} fieldName {@link Ext.data.Field#name}
* @return {Boolean}
*/
isModified : function(fieldName) {
return this.modified.hasOwnProperty(fieldName);
},
-
+
/**
- * Marks this Record as {@link #dirty}. This method
- * is used interally when adding {@link #phantom} records to a
- * {@link Ext.data.Store#writer writer enabled store}.
Marking a record {@link #dirty} causes the phantom to
- * be returned by {@link Ext.data.Store#getModifiedRecords} where it will
- * have a create action composed for it during {@link Ext.data.Store#save store save}
- * operations.
Developers should subscribe to the {@link Ext.data.Store#update} event - * to have their code notified of reject operations.
- * @param {Boolean} silent (optional) True to skip notification of the owning - * store of the change (defaults to false) + * Usually called by the {@link Ext.data.Store} to which this model instance has been {@link #join 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 {@link Ext.data.Store#update} event to have their code notified of reject + * operations. + * + * @param {Boolean} silent (optional) True to skip notification of the owning store of the change. + * Defaults to false. */ reject : function(silent) { var me = this, @@ -878,19 +1015,19 @@ Ext.define('Ext.data.Model', { }, /** - * Usually called by the {@link Ext.data.Store} which owns the model instance. - * Commits all changes made to the instance since either creation or the last commit operation. - *Developers should subscribe to the {@link Ext.data.Store#update} event - * to have their code notified of commit operations.
- * @param {Boolean} silent (optional) True to skip notification of the owning - * store of the change (defaults to false) + * Usually called by the {@link Ext.data.Store} which owns the model instance. Commits all changes made to the + * instance since either creation or the last commit operation. + * + * Developers should subscribe to the {@link Ext.data.Store#update} event to have their code notified of commit + * operations. + * + * @param {Boolean} silent (optional) True to skip notification of the owning store of the change. + * Defaults to false. */ commit : function(silent) { var me = this; - - me.dirty = false; - me.editing = false; + me.phantom = me.dirty = me.editing = false; me.modified = {}; if (silent !== true) { @@ -900,24 +1037,27 @@ Ext.define('Ext.data.Model', { /** * Creates a copy (clone) of this Model instance. - * @param {String} id (optional) A new id, defaults to the id - * of the instance being copied. See{@link #id}.
- * To generate a phantom instance with a new id use:
-var rec = record.copy(); // clone the record
-Ext.data.Model.id(rec); // automatically generate a unique sequential id
- *