博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
数据模型
阅读量:5944 次
发布时间:2019-06-19

本文共 4408 字,大约阅读时间需要 14 分钟。

hot3.png

我们在上一节中介绍了如何在ExtJS 中自定义类,这一节中将介绍如何自定义数据模型。

自定义数据模型

在上一节中,我们使用Ext.define 来自定义类,通过Ext.define 定义的类都默认继承自Ext.base 类。如果我们将extend 设置为Ext.data.Model,那么定义的类就是一个数据模型类了。先定义一个简单的数据模型类 User类,代码如下:

Ext.define('MyApp.User', {    extend: 'Ext.data.Model',    fields: [        { name: 'name', type: 'string' },        { name: 'age', type: 'int' },        { name: 'phone', type: 'string' }    ]});

在代码中可以看出,数据模型类其实就是一个继承自Ext.data.Model 的类。

fields 属性中定义了该模型的字段,它可以是对应到数据库中的字段。在使用的时候,数据模型包含的字段和类的属性使用方式不太相同。要访问字段的值,需要视同get 和 set 方法,例如:

var Tom = Ext.create("MyApp.User", {    name: 'Tom',    age: 26,    phone:'123456'});Tom.set('age', 20);Ext.MessageBox.alert('提示', Tom.get('age'));

我们实例化User类,初始化的时候,age的值为26,然后通过set 方法设置为 20,再通过get 方法得到 age 字段的值,运行截图如下:

 

字段类型和转换器

在定义数据模型的时候,我们可以定义字段的类型和该类型的转换器。例如,我们将为User类添加birthday字段,在初始化的时候,我们可能会传入一个字符串类型的日期格式,这个时侯就需要我们来定义一个类型转换器,将字符串格式的日期转换为Date类型。代码如下:

Ext.define('MyApp.User', {    extend: 'Ext.data.Model',    fields: [        { name: 'name', type: 'string' },        { name: 'age', type: 'int' },        { name: 'phone', type: 'string' },        {            name: 'birthday',            type: 'date',            convert: function

(value, record) { if (Ext.isDate(value)) return value; else if (Ext.isString(value)) { return Ext.Date.parse(value, "Y-m-d"

);                }            }        }    ]});

在代码中添加了birthday字段,并为该字段设置了转换器,当传入的类型为string时,将会被转换为标准的时间类型。用法如下:

var Tom = Ext.create("MyApp.User", {    name: 'Tom',    age: 26,    phone: '123456',    birthday:'2000-01-15'});alert(Tom.get('birthday'));

在使用的时候,传入的是一个字符串类型的时间,当我们实例化以后,字符串日期被转换为标准的时间类型:

 

数据验证

我们可以使用数据模型来验证数据是否正确。在上面的例子中,我们希望phone 字段的长度在8和15之间,那么,我们需要这样修改代码:

Ext.define('MyApp.User', {    extend: 'Ext.data.Model',    fields: [        { name: 'name', type: 'string' },        { name: 'age', type: 'int' },        { name: 'phone', type: 'string' },        {            name: 'birthday',            type: 'date',            convert: function (value, record) {                if (Ext.isDate(value))                    return value;                else if (Ext.isString(value)) {                    return Ext.Date.parse(value, "Y-m-d");                }            }        }    ],    validations: [        { field:

'phone', type: 'length'

, min: 8, max: 15 }    ]});

为phone 字段添加验证,验证类型为length,最小为8,最大为15,验证的代码如下:

var Tom = Ext.create("MyApp.User", {    name: 'Tom',    age: 26,    phone: '123456',    birthday:'2000-01-15'});var errors = Tom.validate();var errorMsg = [];if (!errors.isValid()) {    errors.each(function (error) {        errorMsg.push(error.field + "   " + error.message);    });    Ext.Msg.alert("错误", errorMsg.join('
'));}

我们将phone的长度设置为6位,很明显是不能通过验证的。程序运行起来以后,我们会得到下面的错误:

 

尽管我们已经引入了汉化包,但这里的提示还是英文的,为了能让他显示为中文,我们需要手动的来将其汉化,在程序开始的时候加入代码:

Ext.data.validations.lengthMessage = "长度错误";

刷新我们的页面,错误提示已经变成中文了:

 

由此可以看出,ExtJS 的验证错误提示是没有进行汉化的,我们可以将相应的汉化代码写在Layout中,方便所有页面都能够使用。

自定义验证规则

ExtJS 中虽然内置了一些验证规则,但这些规则面对庞大的业务需求肯定是不够的,所以ExtJS 还允许我们自定义验证规则。

在User类中,我们希望age字段的值在0到150之间,我们来自定义一个验证规则:

Ext.apply(Ext.data.validations, {    ageMessage: '必须在0到150之间',    age: function (config, value) {        if (value === undefined || value === null) {            return false;        }        if (value < 0 || value > 150) {            return false;        }        return true;    }});

Ext.apply 方法用来将第二个参数中的属性和方法复制到第一个参数中,在这里的作用是将我们定义的age规则添加到Ext 的验证规则中。

接下来我们修改验证部分的代码,添加age验证:

validations: [    { field: 'phone', type: 'length', min: 8, max: 15 },    { field: 'age', type: 'age', min: 8, max: 15 }]

在初始化的时候,我们将age的值设置为-26,运行程序,截图如下:

 

数据模型之间的关系

(本段内容翻译自官方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' }    ]});

转载于:https://my.oschina.net/u/200350/blog/1559970

你可能感兴趣的文章
java.lang.NoClassDefFoundError: org/apache/avro/ipc/Responder
查看>>
利用JasperReport+iReport进行Web报表开发
查看>>
JSON and Microsoft Technologies(翻译)
查看>>
ylbtech-LanguageSamples-ConditionalMethods(条件方法)
查看>>
js 判断各种数据类型
查看>>
【leetcode】Find Peak Element ☆
查看>>
linux:sed高级命令之n、N(转)
查看>>
触发器更新多条数据
查看>>
微信公众平台原创声明功能公测 自媒体原创保护的福音
查看>>
ADF_Advanced ADF系列2_Fusion应用的客制和个性化(Part2)
查看>>
php_linux_centos6.4_安装mysql_apache_php
查看>>
Myeclipse或Eclipse中搭建Easyui环境
查看>>
java的基本数据类型
查看>>
WPF中的CheckBox的_ (underscore / 下划线)丢失
查看>>
正则表达式匹配数字
查看>>
前端模块化
查看>>
QIBO CMS SQL Injection Via Variable Uninitialization In \member\special.php
查看>>
二维数组---模拟斗地主
查看>>
【转】(DT系列六)devicetree中数据和 struct device有什么关系
查看>>
【前端性能】必须要掌握的原生JS实现JQuery
查看>>