自定义数据模型

  数据模型类其实就是一个继承自Ext.data.Model 的类。

  1. Ext.define('MyApp.User', {
  2. extend: 'Ext.data.Model',
  3. fields: [
  4. { name: 'name', type: 'string' },
  5. { name: 'age', type: 'int' },
  6. { name: 'phone', type: 'string' }
  7. ]
  8. });

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

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

字段类型和转换器

  

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

  1. Ext.define('MyApp.User', {
  2. extend: 'Ext.data.Model',
  3. fields: [
  4. { name: 'name', type: 'string' },
  5. { name: 'age', type: 'int' },
  6. { name: 'phone', type: 'string' },
  7. {
  8. name: 'birthday',
  9. type: 'date',
  10. convert: function (value, record) {
  11. if (Ext.isDate(value))
  12. return value;
  13. else if (Ext.isString(value)) {
  14. return Ext.Date.parse(value, "Y-m-d");
  15. }
  16. }
  17. }
  18. ]
  19. });

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

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

  

数据验证

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

  1. Ext.define('MyApp.User', {
  2. extend: 'Ext.data.Model',
  3. fields: [
  4. { name: 'name', type: 'string' },
  5. { name: 'age', type: 'int' },
  6. { name: 'phone', type: 'string' },
  7. {
  8. name: 'birthday',
  9. type: 'date',
  10. convert: function (value, record) {
  11. if (Ext.isDate(value))
  12. return value;
  13. else if (Ext.isString(value)) {
  14. return Ext.Date.parse(value, "Y-m-d");
  15. }
  16. }
  17. }
  18. ],
  19. validations: [
  20. { field: 'phone', type: 'length', min: 8, max: 15 }
  21. ]
  22. });

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

  1. var Tom = Ext.create("MyApp.User", {
  2. name: 'Tom',
  3. age: 26,
  4. phone: '123456',
  5. birthday:'2000-01-15'
  6. });
  7. var errors = Tom.validate();
  8. var errorMsg = [];
  9. if (!errors.isValid()) {
  10. errors.each(function (error) {
  11. errorMsg.push(error.field + " " + error.message);
  12. });
  13. Ext.Msg.alert("错误", errorMsg.join('<br />'));
  14. }

  

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

自定义验证规则

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

  1. Ext.apply(Ext.data.validations, {
  2. ageMessage: '必须在0到150之间',
  3. age: function (config, value) {
  4. if (value === undefined || value === null) {
  5. return false;
  6. }
  7.  
  8. if (value < 0 || value > 150) {
  9. return false;
  10. }
  11.  
  12. return true;
  13. }
  14. });

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

ExtJS 数据模型的更多相关文章

  1. Extjs学习笔记之九 数据模型(上)-extjs

    来源:niutuku.com | vincent上传于2012-07-20 | 1802次浏览 | 0条评论 本文开始进入Extjs最核心最优秀的部分. 标签:Extjs 数据模型   Extjs的数 ...

  2. Javascript - ExtJs - 组件 - 分页

    服务端只需要返回如下格式的字符串,ExtJs就可以解析并自动生成分页数据.  , name: "sam" }     ] } 准备: CREATE PROCEDURE [dbo]. ...

  3. Ext学习-基础概念,核心思想介绍

    1.目标   本阶段的目标是通过学习一些基础知识来对EXTJS有个整体的了解,知道EXTJS的基础语法,核心设计思想等等 2.内容   1.基础部分学习   2.EXTJS类系统介绍   3.EXTJ ...

  4. 1 model的创建

    extJs数据模型之Model博客分类: ExtJs   1 model的创建 //我们利用Ext.define来创建我们的模型类 //DB table person(name,age,email) ...

  5. ExtJS 4.2 教程-04:数据模型

    转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-4-data-model ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程 ...

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

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

  7. ExtJS的数据模型

    给大家介绍一下ExtJS的组件模型. 常见的Ajax的开发流程: 1.定义URL,metod,params 2.开发后台  接收JSON/XML数据 返回JSON/XML数据 3.前台回调 4.显示到 ...

  8. ExtJS 项目准备工作(一)

    首先,需要从网上下载两个文件,一个是SenchaCmd-6.2.0-windows-64bit(我的电脑是window 10 64位) 另一个是ExtJs6的源码包(ext-6.0.0.415). 源 ...

  9. Extjs 学习总结-Ext.define自定义类

    本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自 ...

随机推荐

  1. 使用sublime一键格式化XML文件

    1 sublime简介 sublime是一款代码编辑和阅读软件,体积小,运行快,界面非常简洁漂亮.官方地址:https://www.sublimetext.com/ 2 在sublime上安装插件 使 ...

  2. redis 基础知识

    1.安装 sudo apt-get install redis-server 检查Redis服务器程序,执行:ps -aux|grep redis 命令检查Redis服务器状态,执行:netstat ...

  3. [HttpPost]和[AcceptVerbs(HttpVerbs.Post)]区别

    1.共同点:[HttpPost]和[AcceptVerbs(HttpVerbs.Post)]都是只接受POST请求过来的数据. 2.不同点:在MVC中如果想一个action既可以回应POST请求也可以 ...

  4. ump_player在线直播播放器

      ump_player在线直播播放器封装,可以支持加载在线直播流 https://github.com/Mrxdh/EveryExercise/blob/master/ump_player%E5%9 ...

  5. 群集中的MS DTC分布式事务协调器

    MS DTC在大多数SQL 服务器下都需要安装,若只是安装数据库引擎或Analysis 服务可不安装DTC.如果后需要使用分布式事务,则可在SQL Server群集安装完成后再安装DTC. 一.群集M ...

  6. CSS解决未知高度垂直居中

    尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...

  7. MySQL主从复制

    Mysql主从复制介绍 MySQL支持单向.双向.链式级联.实时.异步复制.在复制过程中,一台服务器充当服务器(Master),而一个或多个其它的服务器充当从服务器(Slave). 复制可以是单向:M ...

  8. css text-overflow:ellipsis 文字多余剪切

    text-overflow: ellipsis;多度剪切white-space: nowrap;禁止换行overflow: hidden;多余隐藏

  9. 耿丹CS16-2班第七次作业汇总

    Deadline: 2016-11-27 11:59pm 作业内容 第七次作业总结 01.每次成绩发布,麻烦没交作业的同学(暂定得分为-5的),请及时补交: 02.想不出来可以,代码乱成一团不行,命名 ...

  10. Ajax深入解析

    AJAX:Asynchronous JavaScript And Xml(异步的JS和XML) 同步:客户端发起请求>服务端的处理和响应>客户端重新载入页面(循环) 异步:客户端实时请求& ...