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.

模型表示你的app管理的对象。例如Users, Products, Cars等模型类,或其它你想在app中模型化的真实世界的对象。模型通过model manager注册,被stores使用,stores被Ext中大量数据绑定组件使用。

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', convert: null},
{name: 'phone', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true, convert: null}
], changeName: function() {
var oldName = this.get('name'),
newName = oldName + " The Barbarian"; this.set('name', newName);
}
});

The fields array is turned into a MixedCollection automatically by the ModelManager, and all other functions and properties are copied to the new Model's prototype.

字段数组会被 ModelManager自动转变为MixedCollection,其它的函数和属性会被复制到新模型的prototype。

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

模型定义总是具有一个标识字段--做为每个实例的唯一键。缺省的,一个命名为”id“的字段会自动映射到”id“属性,这功能是由模型缺省的idProperty提供的。

To alter which field is the identifying field, use the idProperty config.

要改变做为标识列的字段,使用 idProperty 配置。

If the Model should not have any identifying field (for example if you are defining ab abstract base class for your application models), configure the {@liknkidProperty} as null.

如果模型不应该包含任何标识字段(例如你正在定义一个app中使用的抽象基类),则将{@liknkidProperty} 配置为 null。

By default, the built in numeric and boolean field types have a Ext.data.Field.convert function which coerces string values in raw data into the field's type. For better performance with Json or Array readers if you are in control of the data fed into this Model, you can null out the default convert function which will cause the raw property to be copied directly into the Field's value.

缺省的,数值和布尔属性类型有一个内置的函数,它会强迫字符串数值转换为属性的类型。把数据填充到模型中,为了让Json或者是Array读取器有更好的表现,可以把默认的转换方法置空,这些转换方法会把原生属性直接复制到属性的值中。(注:这样做的前提是要保证reander读到的数据值都是正确的,不需要转换)

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

现在我们可以创建User模型的实例,并且调用我们定义的任何模型逻辑:

var user = Ext.create('User', {
id : 'ABCD12345',
name : 'Conan',
age : 24,
phone: '555-555-5555'
}); user.changeName();
user.get('name'); //returns "Conan The Barbarian"

Validations   验证

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

模型是内置支持校验器的,它会执行Ext.data.validations中的校验器方法,校验器是很容易添加到模型中的。

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 validate function, which returns a Ext.data.Errors object:

简单地调用validate方法就会进行校验,它返回Ext.data.Errors对象

var instance = Ext.create('User', {
name: 'Ed',
gender: 'Male',
username: 'edspencer'
}); var errors = instance.validate();

Associations

Models can have associations with other Models via Ext.data.association.HasOnebelongsTo 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:

模型通过Ext.data.association.HasOne、blongsTo、hasMany建立起和其他模型的关系。例如,写一个博客管理系统,这个系统要处理用户、帖子和内容,这些模型有下面这些关系:

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 Ext.data.association.HasOneExt.data.association.BelongsTo and Ext.data.association.HasMany 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: ['id'], associations: [
{type: 'hasMany', model: 'Post', name: 'posts'},
{type: 'hasMany', model: 'Comment', name: 'comments'}
]
});

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:

模型可以很清楚表示出数据和关系的类型,但是使用模型的目的是用来加载和保存数据。所有数据的加载和保存都是使用Proxy来处理,Proxy可以在模型中直接设置。

Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'], proxy: {
type: 'rest',
url : '/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:

建立Rest Proxy,Rest Proxy会从RESTful后端加载和保存数据。请看看是它如何工作的:

var user = Ext.create('User', {name: 'Ed Spencer', email: 'ed@sencha.com'});

user.save(); //POST /users

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.

新的模型对象调用save方法会使RestProxy把模型数据保存到服务器上。 RestProxy根据模型是否有id来判断模型是否已经保存,据此采取合适的操作,如果要保存数据,RestProxy会发送post请求到配置的url。请根据API在模型上配置Proxy-请看Ext.data.proxy.Proxy中关于Proxy的完整列表。

Loading data via the Proxy is equally easy:

通过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, {
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  在Store中使用

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:

在UI中显示和控制一组模型对象是经常需要的,

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.

store是模型对象的集合,通常这些模型对象是从服务器某个地方加载的。Store通过Proxy和服务进行通过操作,比如添加,比如更新,比如删除。请查阅Store了解更多关于Store的信息。

ExtJS笔记 Ext.data.Model的更多相关文章

  1. ExtJS笔记 Ext.data.Types

    This is a static class containing the system-supplied data types which may be given to a Field. Type ...

  2. ExtJs Ext.data.Model 学习笔记

    Using a Proxy Ext.define('User', { extend: 'Ext.data.Model', fields: ['id', 'name', 'email'], proxy: ...

  3. [ExtJs] ExtJs4.2 数据模型Ext.data.Model学习

    Model代表应用程序管理的一些对象.例如,我们可能会为 我们想在系统中建模的现实世界中的一些物体像使用者.产品和汽车等定义一个Model.这些Model在 Ext.ModelManager中注册,被 ...

  4. ExtJS教程(5)---Ext.data.Model之高级应用

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jaune161/article/details/37391399 1.Model的数据验证 这里借助 ...

  5. 20. Extjs学习笔记——Ext.data.JsonStore使用说明

    Ext.data.JsonStore继承于Ext.data.Store,使得从远程JSON数据创建stores更为方便的简单辅助类.JsonStore合成了Ext.data.HttpProxy与Ext ...

  6. Extjs学习笔记——Ext.data.JsonStore使用说明

    Ext.data.JsonStore继承于Ext.data.Store.使得从远程JSON数据创建stores更为方便的简单辅助类. JsonStore合成了Ext.data.HttpProxy与Ex ...

  7. extJS 中 ext.data 介绍

    ext.data 最主要的功能是获取和组织数据结构,并和特定控件联系起来,于是,Ext.data成了数据的来源,负责显示数据. Ext.data在命名空间中定义了一系列store.reader和pro ...

  8. ExtJS笔记 Ext.Loader

    Ext.Loader is the heart of the new dynamic dependency loading capability in Ext JS 4+. It is most co ...

  9. EXtJS Ext.data.Model

    (一).首先我们介绍一下Model类中比较常用的几个属性,如果我们想构建一个Model类,最主要的属性就是(Fields)属性,这个属性接受一个数组.用来设置Model中所包含的字段.定义的格式如下: ...

随机推荐

  1. 我的c++学习(4) C++输入输出格式的控制

    默认进制:默认状态下,数据按十进制输入输出.如果要求按八进制或十六进制输入输出,在cin或cout中必须指明相应的数据形式,oct为八进制,hex为十六进制,dec为十进制. #include &qu ...

  2. Codeforces 682D Alyona and Strings(DP)

    题目大概说给两个字符串s和t,然后要求一个包含k个字符串的序列,而这个序列是两个字符串的公共子序列,问这个序列包含的字符串的总长最多是多少. 如果用DP解,考虑到问题的规模,自然这么表示状态: dp[ ...

  3. c# 基本值类型及其默认值

    //值类型 C# 类型      .NET Framework 类型 bool            System.Boolean 4Byte 32bit布尔型变量 逻辑值,true或者false,默 ...

  4. WPF中获取形状范围

    在没加入到Canvas时,也能获取形状的方法: var polygon = new Polygon(); polygon.Points.Add(new Point(xStart, yStart)); ...

  5. 使用TCMalloc优化OpenResty

    1.安装依赖包 yum -y install wget gcc gcc-c++ -y 2.安装libunwind库可以从http://ftp.twaren.net/Unix/NonGNU//libun ...

  6. JS性能优化笔记搜索整理

    通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x ...

  7. 【BZOJ1034】[ZJOI2008]泡泡堂BNB 贪心

    Description 第XXXX届NOI期间,为了加强各省选手之间的交流,组委会决定组织一场省际电子竞技大赛,每一个省的代表队由n名选手组成,比赛的项目是老少咸宜的网络游戏泡泡堂.每一场比赛前,对阵 ...

  8. AJAX-跨域解决之 JSONP

    (一)AJAX ajax 就是从某个文件中去找相关的数据,把数据拿过来以后,利用数据 分析数据 去做我们想做的事情    分两部分:拿数据                  用数据 oUsername ...

  9. Selenium_用selenium webdriver实现selenium RC中的类似的方法

    最近想总结一下学习selenium webdriver的情况,于是就想用selenium webdriver里面的方法来实现selenium RC中操作的一些方法.目前封装了一个ActionDrive ...

  10. python算法——第四天

    一.递归 def func(num): if num / 2 > 0: num -= 1 print(num) num = func(num) print('quit') return num ...