ExtJS Note Ext.data.Model

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, the We want to Model in T The He system. Models is registered via the Model manager, and is used by stores, which is in turn used by many of the Data-bound comp Onents in Ext.

The model represents the object that your app manages. such as Users, products, cars and other models, or other real-world objects that you want to model in the app. Models are registered with model manager , used by stores, and stores are used by a large number of data binding components in Ext.

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

The model is defined as a collection of some fields and may contain any method or property related to the model. For example:

Ext.define (' User ', {extend:' Ext.data.Model ', fields: [{name:' Name ', type: ' String '}, {name:' Age ', type: ' int ', convert:NULL}, {name:' Phone ', type: ' String '}, {name:' Alive ', type: ' Boolean ', DefaultValue:true, convert:NULL}], ChangeName:function() {        varOldname = This. Get (' name '), NewName= Oldname + "The Barbarian";  This. Set (' name ', NewName); }});

The fields array is turned to a mixedcollection automatically by the Modelmanager, and all other functions and propertie S is copied to the new Model ' s prototype.

The field array is automatically converted to mixedcollection by Modelmanager, and other functions and properties are copied to the prototype of the new model .

A Model definition always have an identifying field which should yield a unique key for each instance. By default, a field named "ID" is created with a mapping of "id". This happens because of the default idproperty provided in Model definitions.

The model definition always has an identity field--a unique key for each instance. By default, a field named "ID" is automatically mapped to the "id" attribute, which is provided by the model's default Idproperty.

To alter which field was the identifying field, use the Idproperty config.

To change the field as an identity column, use the Idproperty configuration.

If the Model should not has any identifying field (for example if is defining AB abstract base class for your applic ation models), configure the {@liknkidProperty} as null .

If the model should not contain any identity fields (for example, if you are defining an abstract base class used in an app), then {@liknkidproperty} is configured tonull。

By default, the built in numeric and Boolean field types has a Ext.data.Field.convert function which coerces string value s in raw data into the field ' s type. For better performance with Json or Array readers if you is in control of the the the data fedto this Model, you can Null out the default convert function which would cause the raw property is copied directly into the Field ' s value.

The default, numeric and Boolean attribute types have a built-in function that forces string values to be converted to the type of the property. Populating the data into the model, in order for JSON or array readers to have a better performance, the default conversion method can be empty, these conversion methods will be copied directly into the value of the property. (Note: The premise is to ensure that the data values read by Reander are correct and do not need to be converted)

Now we can create instances the our User model and call any model logic we defined:

Now we can create an instance of the user model and invoke any of the model logic we define:

var user = ext.create (' user ', {    id   ' ABCD12345 '    , ' Conan ', age  555-555-5555 '}); User.changename (); User.get (//returns "Conan     The Barbarian "

Validations Verification

Models has built-in support for validations, which is executed against the validator functions in Ext.data.validations ( See all validation functions). Validations is easy-to-add to models:

The model is built in to support the validator, which executes the validator method in Ext.data.validations, which is easily added to the model.

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 is run by simply calling the Validate function, which returns a Ext.data.Errors object:

A simple call to the validate method verifies that it returns the Ext.data.Errors object

var instance = ext.create (' User ', {    ' Ed ',    ' Male ',    ' Edspencer '} ); var errors = Instance.validate ();

Associations

Models can has 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:

Model through ext.data.association.hasone, blongsto, Hasmany establishes relationships with other models. For example, write a blog management system that processes users, posts, and content that have the following relationships:

Ext.define (' Post ', {    ' Ext.data.Model ', fields    : [' id ', ' user_id '],    ' user ' ,    hasmany  ' Comment ', Name: ' Comments '}}); Ext.define (' Comment ', {    ' Ext.data.Model ', fields    : [' id ', ' user_id ', ' post_id ' ],    ' Post '}); Ext.define (' User ', {    ' Ext.data.Model ', fields    : [' id '],    hasmany: [        ' Post ',        ' Comment ', Name: ' Comments '}    ]});

See the docs for Ext.data.association.HasOne, Ext.data.association.BelongsTo and Ext.data.association.HasMany for Details on the usage and configuration of associations. Note that associations can also is specified like this:

Consult the documentation to see the usage and configuration details of these relationships, which can also be specified as follows:

Ext.define (' User ', {    ' Ext.data.Model ', fields    : [' id '],    associations: [         ' Hasmany ', Model: ' Post ',    name: ' Posts '},        ' Hasmany ', Model: ' Comment ', Name: ' Comments '}    ] });

Using a Proxy

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

Models can clearly represent the types of data and relationships, but the purpose of using the model is to load and save data. All data loading and saving is handled using proxy, whichcan be set directly in the model.

Ext.define (' User ', {    ' Ext.data.Model ', fields    : [' id ', ' name ', ' email '],    proxy: {        ' rest ',        '/users '    }});

Here we ' ve set up a Rest Proxy, which knows how to load and save data to and from a RESTful backend. Let's see how this works:

Create a rest proxy,and Rest proxy loads and saves data from the restful back end. Let's see how it works:

var user = ext.create (' user ', {name: ' Ed Spencer ', email: ' [email protected] '//POST/ Users

Calling save on the new model instance tells the configured Restproxy so we wish to persist this Model's data onto our s Erver. Restproxy figures out of the This Model hasn ' t been saved before because it doesn ' t has an ID, and performs the appropriate Action-in this case issuing a POST request to the URL we configured (/users). We Configure any proxies on the all Model and always follow this api-see Ext.data.proxy.Proxy for a full list.

Calling the Save method on the new model object causes Restproxy to save the model data to the server. Restproxy Determines whether the model has been saved based on whether the model has an ID, takes appropriate action, and if the data is to be saved,Restproxy sends a POST request to the configured URL. Please configure proxy-on the model according to the API see the complete list of proxies in Ext.data.proxy.Proxy.

Loading data via the Proxy is equally easy:

It is easy to load data via proxy

// 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, {    function(user) {        //logs 123     }});

Models can also be updated and destroyed easily:

The model is also easily updated and destroyed:

//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 would perform a PUT request to/users/123 as this Model already have an IDUser.save ({success:function() {Console.log (' The User was updated '); }});//tells the Proxy to destroy the Model. Performs a DELETE request to/users/123User.destroy ({success:function() {Console.log (' The User was destroyed! '); }});

Usage in Stores used in store

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

It is often necessary to display and control a set of model objects in the UI,

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

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

The store is a collection of model objects that are typically loaded from a server somewhere. store through proxies and services through the operation, such as adding, such as updates, such as delete. Please check the store for more information about the store.

ExtJS Note Ext.data.Model