ExtJS 4.2 教程-04:数据模型
更多的ExtJS教程,点击进入>>《ExtJS 教程目录》,持续更新中……
转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-4-data-model
ExtJS 4.2 教程-01:Hello ExtJSExtJS 4.2 教程-02:bootstrap.js 工作方式ExtJS 4.2 教程-03:使用Ext.define自定义类ExtJS 4.2 教程-04:数据模型ExtJS 4.2 教程-05:客户端代理(proxy)ExtJS 4.2 教程-06:服务器代理(proxy)ExtJS 4.2 教程-07:Ext.Direct我们在上一节中介绍了如何在ExtJS 中自定义类,这一节中将介绍如何自定义数据模型。
自定义数据模型在上一节中,我们使用Ext.define 来自定义类,通过Ext.define 定义的类都默认继承自Ext.base 类。如果我们将extend 设置为Ext.data.Model,那么定义的类就是一个数据模型类了。先定义一个简单的数据模型类 User类,代码如下:
字段类型和转换器在定义数据模型的时候,我们可以定义字段的类型和该类型的转换器。例如,我们将为User类添加birthday字段,在初始化的时候,我们可能会传入一个字符串类型的日期格式,这个时侯就需要我们来定义一个类型转换器,将字符串格式的日期转换为Date类型。代码如下:
数据验证我们可以使用数据模型来验证数据是否正确。在上面的例子中,我们希望phone 字段的长度在8和15之间,那么,我们需要这样修改代码:
我们将phone的长度设置为6位,很明显是不能通过验证的。程序运行起来以后,我们会得到下面的错误:
尽管我们已经引入了汉化包,但这里的提示还是英文的,为了能让他显示为中文,我们需要手动的来将其汉化,在程序开始的时候加入代码:
由此可以看出,ExtJS 的验证错误提示是没有进行汉化的,我们可以将相应的汉化代码写在Layout中,方便所有页面都能够使用。
自定义验证规则ExtJS 中虽然内置了一些验证规则,但这些规则面对庞大的业务需求肯定是不够的,所以ExtJS 还允许我们自定义验证规则。
在User类中,我们希望age字段的值在0到150之间,我们来自定义一个验证规则:
数据模型之间的关系(本段内容翻译自官方api)
模型之间可以通过 Ext.data.association.HasOne, belongsTo 和 hasMany 设置彼此的关系。例如在博客管理程序中,我们需要处理用户(Users)、文章(Posts)和评论(Comments)之间的关系,他们的关系如下:
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' } ]});你可以通过查看API来了解更多的用法,另外,他们之间的关系还可以这样定义:
Ext.define('User', { extend: 'Ext.data.Model', fields: ['id'], associations: [ { type: 'hasMany', model: 'Post', name: 'posts' }, { type: 'hasMany', model: 'Comment', name: 'comments' } ]});