ExtJS 数据模型
自定义数据模型
数据模型类其实就是一个继承自Ext.data.Model 的类。
- Ext.define('MyApp.User', {
- extend: 'Ext.data.Model',
- fields: [
- { name: 'name', type: 'string' },
- { name: 'age', type: 'int' },
- { name: 'phone', type: 'string' }
- ]
- });
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类添加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('<br />'));
- }
我们将phone的长度设置为6位,很明显是不能通过验证的。程序运行起来以后,我们会得到下面的错误:

自定义验证规则
ExtJS 中虽然内置了一些验证规则,但这些规则面对庞大的业务需求肯定是不够的,所以ExtJS 还允许我们自定义验证规则。
- 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 的验证规则中。
ExtJS 数据模型的更多相关文章
- Extjs学习笔记之九 数据模型(上)-extjs
来源:niutuku.com | vincent上传于2012-07-20 | 1802次浏览 | 0条评论 本文开始进入Extjs最核心最优秀的部分. 标签:Extjs 数据模型 Extjs的数 ...
- Javascript - ExtJs - 组件 - 分页
服务端只需要返回如下格式的字符串,ExtJs就可以解析并自动生成分页数据. , name: "sam" } ] } 准备: CREATE PROCEDURE [dbo]. ...
- Ext学习-基础概念,核心思想介绍
1.目标 本阶段的目标是通过学习一些基础知识来对EXTJS有个整体的了解,知道EXTJS的基础语法,核心设计思想等等 2.内容 1.基础部分学习 2.EXTJS类系统介绍 3.EXTJ ...
- 1 model的创建
extJs数据模型之Model博客分类: ExtJs 1 model的创建 //我们利用Ext.define来创建我们的模型类 //DB table person(name,age,email) ...
- ExtJS 4.2 教程-04:数据模型
转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-4-data-model ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程 ...
- [ExtJs] ExtJs4.2 数据模型Ext.data.Model学习
Model代表应用程序管理的一些对象.例如,我们可能会为 我们想在系统中建模的现实世界中的一些物体像使用者.产品和汽车等定义一个Model.这些Model在 Ext.ModelManager中注册,被 ...
- ExtJS的数据模型
给大家介绍一下ExtJS的组件模型. 常见的Ajax的开发流程: 1.定义URL,metod,params 2.开发后台 接收JSON/XML数据 返回JSON/XML数据 3.前台回调 4.显示到 ...
- ExtJS 项目准备工作(一)
首先,需要从网上下载两个文件,一个是SenchaCmd-6.2.0-windows-64bit(我的电脑是window 10 64位) 另一个是ExtJs6的源码包(ext-6.0.0.415). 源 ...
- Extjs 学习总结-Ext.define自定义类
本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自 ...
随机推荐
- 使用sublime一键格式化XML文件
1 sublime简介 sublime是一款代码编辑和阅读软件,体积小,运行快,界面非常简洁漂亮.官方地址:https://www.sublimetext.com/ 2 在sublime上安装插件 使 ...
- redis 基础知识
1.安装 sudo apt-get install redis-server 检查Redis服务器程序,执行:ps -aux|grep redis 命令检查Redis服务器状态,执行:netstat ...
- [HttpPost]和[AcceptVerbs(HttpVerbs.Post)]区别
1.共同点:[HttpPost]和[AcceptVerbs(HttpVerbs.Post)]都是只接受POST请求过来的数据. 2.不同点:在MVC中如果想一个action既可以回应POST请求也可以 ...
- ump_player在线直播播放器
ump_player在线直播播放器封装,可以支持加载在线直播流 https://github.com/Mrxdh/EveryExercise/blob/master/ump_player%E5%9 ...
- 群集中的MS DTC分布式事务协调器
MS DTC在大多数SQL 服务器下都需要安装,若只是安装数据库引擎或Analysis 服务可不安装DTC.如果后需要使用分布式事务,则可在SQL Server群集安装完成后再安装DTC. 一.群集M ...
- CSS解决未知高度垂直居中
尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...
- MySQL主从复制
Mysql主从复制介绍 MySQL支持单向.双向.链式级联.实时.异步复制.在复制过程中,一台服务器充当服务器(Master),而一个或多个其它的服务器充当从服务器(Slave). 复制可以是单向:M ...
- css text-overflow:ellipsis 文字多余剪切
text-overflow: ellipsis;多度剪切white-space: nowrap;禁止换行overflow: hidden;多余隐藏
- 耿丹CS16-2班第七次作业汇总
Deadline: 2016-11-27 11:59pm 作业内容 第七次作业总结 01.每次成绩发布,麻烦没交作业的同学(暂定得分为-5的),请及时补交: 02.想不出来可以,代码乱成一团不行,命名 ...
- Ajax深入解析
AJAX:Asynchronous JavaScript And Xml(异步的JS和XML) 同步:客户端发起请求>服务端的处理和响应>客户端重新载入页面(循环) 异步:客户端实时请求& ...