这里的包和java的包同义,不是指“数据包”,这个数据包是指Ext.data
data包是负责加载和保存应用中的数据的包,有41个类,其中三个是最重要的:Model
,Store
,Ext.data.proxy.Proxy
,几乎每个应用都要用到它们,有若干个支持类辅助它们:
Models and Stores 模型和存储器
data包的中心是Ext.data.Model
,模型代表了应用中的一些数据类型,例如电子商务应用中可能会有Users
,Products
,Orders
等模型,最简单的模型就是一组字段和它们的数据,看一下模型的四个主要部分,Fields
,Proxies
,Associations
,Validations
让我们看一下,如何创建一个模型:
1
2
3
4
5
6
7
| Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
]
}); |
Model
的一个典型用处就是用在Store
中,Store
就是Model
实例的集合,构建一个Store
并加载数据是很简单的:
1
2
3
4
5
6
7
8
9
| Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'users.json',
reader: 'json'
},
autoLoad: true
}); |
我们配置了Store
使用Ajax Proxy
,告诉它加载数据的url和解析数据的Reader
,这个例子中服务器端需要输出json数据,因此使用了Json Reader
,这个store会从users.json中自动加载一组User模型的实例,users.json需要输出的内容应该类似这样:
1
2
3
4
5
6
7
| {
success: true,
users: [
{ id: 1, name: 'Ed' },
{ id: 2, name: 'Tommy' }
]
} |
Inline data 内联数据
Store
还可以读取内联的数据,这种情况Store内部会转换我们内联的每个对象作为Model实例的数据:
1
2
3
4
5
6
7
8
9
| Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Jamie', lastName: 'Avins' }
]
}); |
Sorting and Grouping 排序和分组
Store同时支持本地和远程的排序、过滤、分组:
1
2
3
4
5
6
7
8
9
10
11
| Ext.create('Ext.data.Store', {
model: 'User',
sorters: ['name', 'id'],
filters: {
property: 'name',
value : 'Ed'
},
groupField: 'age',
groupDir: 'DESC'
}); |
这段代码创建的store,数据会先根据name后根据id来排序,name不是Ed的Users会被过滤掉,而且数据还会根据年龄分组并且倒序。通过Store的api改变排序、过滤、分组都很容易
Proxies 代理
代理是store用来加载和保存模型数据的工具,有两种代理,客户端和服务器端。客户端代理例如Memory内存代理是完全在浏览器内存中的,还有HTML5的本地存储代理。服务器端代理处理和远程服务器间的数据通信例如AJAX,JSONP,REST等方式。
代理可以直接由模型定义:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'age', 'gender'],
proxy: {
type: 'rest',
url : 'data/users',
reader: {
type: 'json',
root: 'users'
}
}
});
// Uses the User Model's Proxy
Ext.create('Ext.data.Store', {
model: 'User'
}); |
这么做有两点好处。第一是假如不同的store都使用User模型,而且假如在每个store中User模型加载数据的方式都相同,这时候在User模型中指定代理,就不需要在多个store中重复指定代理。第二是我们可以让模型直接加载和保存数据而不需要store。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| // 获取 User 模型的引用
var User = Ext.ModelMgr.getModel('User');
var ed = Ext.create('User', {
name: 'Ed Spencer',
age : 25
});
// 我们可以直接保存Ed的数据而不用通过Store
// 因为我们在User模型中配置了一个RestProxy代理,这可以自动发起POST请求到url /users
ed.save({
success: function(ed) {
console.log("Saved Ed! His ID is "+ ed.getId());
}
});
// 加载User 1 然后处理 (通过 GET 请求到 url /users/1)
User.load(1, {
success: function(user) {
console.log("Loaded user 1: " + user.get('name'));
}
}); |
有些代理可以受益于HTML5的本地存储LocalStorage
和SessionStorage
,尽管老旧浏览器不支持这些特性,但是很多应用还是可以受益
Associations 关联
模型之间可以通过关联API关联到一起,大多数应用都处理许多不同的模型,并且模型总是相关的。一个博客应用可能有User,Post,Comment模型,每个User创建Post,每个Post接收评论Comment,我们可以这样表达它们之间的关系:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name'],
proxy: {
type: 'rest',
url : 'data/users',
reader: {
type: 'json',
root: 'users'
}
},
hasMany: 'Post' // shorthand for { model: 'Post', name: 'posts' }
});
Ext.define('Post', {
extend: 'Ext.data.Model',
fields: ['id', 'user_id', 'title', 'body'],
proxy: {
type: 'rest',
url : 'data/posts',
reader: {
type: 'json',
root: 'posts'
}
},
belongsTo: 'User',
hasMany: { model: 'Comment', name: 'comments' }
});
Ext.define('Comment', {
extend: 'Ext.data.Model',
fields: ['id', 'post_id', 'name', 'message'],
belongsTo: 'Post'
}); |
模型之间表示关联非常容易,每个模型可以有随意多的和其他模型的关联,而且定义模型的先后顺序不受限制。当我们有一个模型的实例,我们就可以很容易的遍历出和它相关的数据,例如我们想打印出一个User所有文章的所有评论:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| // Loads User with ID 1 and related posts and comments using User's Proxy
User.load(1, {
success: function(user) {
console.log("User: " + user.get('name'));
user.posts().each(function(post) {
console.log("Comments for post: " + post.get('title'));
post.comments().each(function(comment) {
console.log(comment.get('message'));
});
});
}
}); |
上面例子中每一个hasMany
关联都会给Model
创建一个新function
,例如我们声明了User hasMany Posts
,这就会给User
模型创建一个user.posts()
方法,调用这个方法会返回一个装有Post
模型的Store
,Post
也同样获得了一个comments
方法
关联不仅帮助我们加载数据,创建新record时也很方便:
1
2
3
4
5
6
| user.posts().add({
title: 'Ext JS 4.0 MVC Architecture',
body: 'It\'s a great Idea to structure your Ext JS Applications using the built in MVC Architecture...'
});
user.posts().sync(); |
这里我们实例化了一个新Post
模型,它会的user_id
字段会自动设置成user的id,调用sync()
方法可以通过配置的Proxy
保存新建的Post实例,sync是个移步调用,如果想在sync完成之后获得通知,可以传一个callback函数。
belongsTo
关联也会为模型创建一个新方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| // get the user reference from the post's belongsTo association
post.getUser(function(user) {
console.log('Just got the user reference from the post: ' + user.get('name'))
});
// try to change the post's user
post.setUser(100, {
callback: function(product, operation) {
if (operation.wasSuccessful()) {
console.log('Post\'s user was updated');
} else {
console.log('Post\'s user could not be updated');
}
}
}); |
这里的getUser
也是异步调用,需要传递回调函数来获取user实例。setUser
方法更新了外键(user_id),并且保存Post模型,也可以传递回调函数用来得知操作是否成功。
Loading Nested Data 加载嵌套数据
你可能会奇怪为什么只传了一个success
函数给User.load
,但是获取User的posts和comments时却不用传递回调函数。这是因为上面的例子我们假设了服务器端会在user数据一起返回它相关的post和comment数据。设置了关联关系,框架会自动从user的请求数据中解析post和comment的数据,而不是需要post数据时发新请求,需要comment的数据时又发新请求(作者注:如果每个post和comment都单独请求数据,会给服务器造成很大压力),我们可以像这样返回数据:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| {
success: true,
users: [
{
id: 1,
name: 'Ed',
age: 25,
gender: 'male',
posts: [
{
id : 12,
title: 'All about data in Ext JS 4',
body : 'One areas that has seen the most improvement...',
comments: [
{
id: 123,
name: 'S Jobs',
message: 'One more thing'
}
]
}
]
}
]
} |
框架会自动解析数据。很容易配置模型的代理从任意数据源获取数据,各种数据格式基本都有相应的Reader
可以hold住。ExtJS 3中Store被各种组件使用,例如Grid, Tree, Form
当然也可以用非嵌套的方式加载数据,在’lazy load’的时候这种做法是有用的,只加载需要的数据。让我们像之前一样加载User的数据,这次假设服务器端只返回了User的数据,不包括相关联的其他模型的数据,然后调用user.posts().load()
并传递回调函数接收加载的Post数据:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| // Loads User with ID 1 User's Proxy
User.load(1, {
success: function(user) {
console.log("User: " + user.get('name'));
// Loads posts for user 1 using Post's Proxy
user.posts().load({
callback: function(posts, operation) {
Ext.each(posts, function(post) {
console.log("Comments for post: " + post.get('title'));
post.comments().each(function(comment) {
console.log(comment.get('message'));
});
});
}
});
}
}); |
Validations 校验
ExtJS4的模型Model功能开始变的丰富起来,并且支持数据校验,我们继续上面的例子来展现如何使用数据校验,首先添加对User的数据校验:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| Ext.define('User', {
extend: 'Ext.data.Model',
fields: ...,
validations: [
{type: 'presence', name: 'name'},
{type: 'length', name: 'name', min: 5},
{type: 'format', name: 'age', matcher: /\d+/},
{type: 'inclusion', name: 'gender', list: ['male', 'female']},
{type: 'exclusion', name: 'name', list: ['admin']}
],
proxy: ...
}); |
校验的形式和定义模型种字段的形式一致,每次指定一个字段的一个校验类型,例子种的校验,定义了name字段必须设置值,必须最少5个字符,age字段必须是个数字,gender字段只能取male或者female,username可以是除了’admin’的任何值,有些校验可以接收附加的选项,例如length长度校验可以接收min最小值和max最大值,format校验可以接收一个matcher匹配,ExtJS内置了5种校验器,先来看一下内置的5种校验器:
-
presence
确保这个字段被设置了一个值,空数组是个有效的值,但是空字符串不是 -
length
确保这个字段的长度在最大值最小值之间,最大值和最小值都是可选参数 -
format
确保这个字段符合一个正则表达式 -
inclusion
确保字段在给定的值的集合内,在枚举集合种 -
exclusion
确保字段不在给定的集合种
现在我们已经知道了不同的校验器做了什么事情,通过User使用一下,创建一个User然后执行校验:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| // now lets try to create a new user with as many validation errors as we can
var newUser = Ext.create('User', {
name: 'admin',
age: 'twenty-nine',
gender: 'not a valid gender'
});
// run some validation on the new user we just created
var errors = newUser.validate();
console.log('Is User valid?', errors.isValid()); //returns 'false' as there were validation errors
console.log('All Errors:', errors.items); //returns the array of all errors found on this model instance
console.log('Age Errors:', errors.getByField('age')); //returns the errors for the age field |
关键的方法是validate
,它执行所有配置的校验,并返回一个Errors
对象,这个对象含有所有错误信息,还有一些常用方法例如isValid
,如果没有任何错误isValid
的返回值是true,getByField
方法可以用来获取某一个诊断错误。