文档章节

ext5 Model - 1

C
 Canaan_
发布于 2016/06/14 21:58
字数 951
阅读 17
收藏 0
点赞 0
评论 0

ext5遵从mvc的设计模式,这里要讲的是model 这一层定义

 如果你 在java ee 中定义了一个model如User类,那么在前端ext这里也要定义一个这样的model.

除了User类中该有的字段外,还要继承一个叫Ext.data.Model 才算是定义了一个model。如:

Ext.define('Test.model.User',{
	extend:'Ext.data.Model',
	idProperty:'userId',  //该类的主键为userId字段
	fields:[
		{name:'userId',type:'string'}, //字段:userId ,类型:string
		{name:'name',type:'auto'},     //字段:name,类型:不限
		{name:'age',type:'int'},
		{name:'gender',type:'auto'}
	]
})

这时我们实例化这个类:

var p1 = new Test.model.User({
	userId:'24dfkl243w3',
	name:'wx',
	age:23,
	gender:'Malsdfe'
});

模型类的验证器的定义与使用

验证器可以查一个实例,各个字段的是否符合我们所给出的约束,如名称不能为空,长度在2-5之间等

1.在Test.model.User 类中定义验证器

Ext.define('Test.model.User',{
	extend:'Ext.data.Model',
	idProperty:'userId',
	fields:[
		{name:'userId',type:'string'},
		{name:'name',type:'auto'},
		{name:'age',type:'int'},
		{name:'gender',type:'auto'}
	],
	validators:{
	  age :{type:'presence'},		//年龄不能为null或undefined
	  name:{type:'length',min:2,max:5}, //名称长度在2-5之间
	  gender:[
	  	{type:'presence'},  //不能空
	  	{ type: 'inclusion', list: ['Male', 'Female'] } //值只能是'Male'与'Female'
	  ]
	}
});

为User定义好了验证器,下面我们就可以对实例化后的User进行验证了如:

var p1 = new Test.model.User({
	userId:'24dfkl243w3',
	name:'wx',
	age:23,
	gender:'Malsdfe'
});

p1.isValid()        //false       这时我们只知道p1不满足验证器的规则,但我们不知道具体是哪个

var result = p1.getValidation();
console.info(result);

从这里我们看了result 中的信息,从信息中我们知道了是gender出现了问题.在api(Ext.data.validator.Inclusion)中可以看到这个提示消息是英文,就算国际化了也不好使。这时我们可以重写ext的类达到汉化的目的如:

Ext.data.validator.Inclusion.override({
	config:{
		message:'值不在范围内'
	}
});

具体的细节还侍学习。

模型类中的代理proxy

目前只知道proxy,后利用ajax可以从服务端中更新一个实例化好的类,或创建一个类:如

//defined model
Ext.define('Test.model.User',{
	extend:'Ext.data.Model',
	idProperty:'userId',
	fields:[
		{name:'userId',type:'string'},
		{name:'name',type:'auto'},
		{name:'age',type:'int'},
		{name:'gender',type:'auto'}
	],
	validators:{
	  age :{type:'presence'},		//not empty
	  name:{type:'length',min:2,max:5},
	  gender:[
	  	{type:'presence'},
	  	{ type: 'inclusion', list: ['Male', 'Female'] }
	  ]
	},
	proxy:{
		type:'ajax',
		url:'data/data.jsp'
	}
});

url:data.jsp  返回的内容为:{userId:'24dfkl243w3',name:'Mr.Mark',age:34,gender:'Female'}

var p1 = new Test.model.User({
	userId:'24dfkl243w3',
	name:'wx',
	age:23,
	gender:'Malsdfe'
});

p1.load({
    scope: this,
    failure: function(record, operation) {
        //do something if the load failed
    },
    success: function(record, operation) {
        //do something if the load succeeded
    },
    callback: function(record, operation, success) {
        //do something whether the load succeeded or failed
    }
});

代码说明: 当p1调用 load时,将主键userId作为参数传到服务器,服务器要处理的就是根据这个userId返回相应的数据,从而达到更新的目的。注意:当服务器传回的UserId与之前的不一致时会报错。所以这个load主要作用是当服务器的数据发生变化时,可以及时的更新到前台。

2.使用proxy创建一个实例:

p2 = Test.model.User.load(10, {
    scope: this,
    failure: function(record, operation) {
        //do something if the load failed
    },
    success: function(record, operation) {
        //do something if the load succeeded
    },
    callback: function(record, operation, success) {
        //do something whether the load succeeded or failed
    }});

代码说明:10作为主键传到服务器,服务器返回相应的数据,从而实例化p2对象。注意如果服务器中传回的主键(这里是userId)与参数不一致(这里是10)就会报错。

模型之间的关系 1对1 1对 n 

       //老师
Ext.regModel("teacher",{
     fields:[
            {name:"teacherId",type:"int"},
            {name:"name",type:"auto"}
     ],
     hasMany:{
            model:"student",
            name:"getStudent",
            filterProperty:"teacher_Id"
     }
});
//学生
Ext.regModel("student",{
     fields:[
            {name:"studentId",type:"int"},
            {name:"name",type:"auto"},
            {name:"teacher_Id",type:"int"}
     ]
});

  name来指定创建的时候的属性,这个很重要,如果指定了name,且值为getStudent  则可以在创建teacher类的对象中直接调用teacher.students  系统会自动加一个s 这个返回的就是student类的集合filterProperty:指定的外键的名字

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
C
粉丝 13
博文 226
码字总数 97359
作品 0
福州
ExtJS(4)- Ext5.0中的ux和FontAwesome

Ext5相较之前的版本有很大的变化,其中最明显的就是组件的样式,Ext5中的组件将会可以自适应移动终端(手机,平板)的显示,这一点上大大地增强了Ext跨平台的支持。当然还有很多值得我们期待...

雪飘七月 ⋅ 2014/12/17 ⋅ 0

ExtJS(5)- Ext5的统计图Chart

今天系统整理下Ext5中的chart使用以及遇到的一些问题。 首先是Ext5中chart的引用,在5之前的版本中chart的api会被集合在ext-all.js中,但是在5当中并不是这样,如果只引入ext-all.js,我们引...

雪飘七月 ⋅ 2014/12/18 ⋅ 0

ExtJS(6)- 用Sencha Cmd构建打包Ext项目

用ExtJS组建前端框架有一年多了,考虑到ExtJS中js过多,为提高效率,所以开始寻找打包的方法,然后就发现了这个Sencha Cmd。首先Sencha Cmd不仅仅是为了打包而生的,它同样具有构建前端框架的...

雪飘七月 ⋅ 2015/06/10 ⋅ 0

[杂记] 感于近日 Linux 新闻

近日 Linux 业界最大的新闻莫过于 Ext4 的准备推出,这的确为 Linux 巩固了 WEB 服务器市场的份额,近日各大媒体报道 Linus Torvalds 向内核主支整合了大量文件系统 Ext4 的补丁,这一信号标...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

ext5 - 异步加载要使用的自定义类

利用ext良好的扩展性,我们很容易定义自己的组件。一般这样组件的代码都是一个单独的文件,在要用的时候就加载进来。久而久之,这样自定义的组件多了同样组件所对的文件也多了起来,这时如果...

Canaan_ ⋅ 2016/06/08 ⋅ 0

glm.c java版本

package com.telenav; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.InputStreamReader; impor......

derekliu ⋅ 2012/04/06 ⋅ 0

ReST API 服务器--Python Marlin

Marlin 是 Redis 上快速简单的 ReST API 服务器。 快速开始: pip install marlin # install marlin to the python environment.marlin-server start # start marlin server - port: 5000 请......

叶秀兰 ⋅ 2015/06/09 ⋅ 0

Yii2.0 ActiveForm Input Fields

之前5月学习Yii2的时候发现的一个不错的博客内容,这里转载保存。 Use the namespace For ActiveForm Active Form Begin And End Text Input Field TextArea Field Password Input Field HT......

卖小女孩的小火柴 ⋅ 2015/06/02 ⋅ 0

Magento购物车价格计算的功能实现之代码理解

一、代码流程: 1、MageSalesModel_Quote::collectTotals(); 图1-001 MageSale模块的MageSalesModelQuote::collectTotals()方法 2、循环 MageSalesModel_Quote::getAllAddress()地址信息 3、......

邪恶的小Y ⋅ 2016/03/24 ⋅ 0

Yii 框架里数据库操作详解-[增加、查询、更新、删除的方法 'AR模式']

public function getMinLimit () { $sql = "..."; $result = yii::app()->db->createCommand($sql); $query = $result->queryAll(); return array ( $query [0] ['max'], ); } $connection=Y......

蜗牛奔跑 ⋅ 2015/11/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 18分钟前 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

楠木楠 ⋅ 30分钟前 ⋅ 0

Python 数电表格格式化 xlutils xlwt xlrd的使用

需要安装 xlutils xlwt xlrd 格式化前 格式化后 代码 先copy读取的表格,然后按照一定的规则修改,将昵称中的学号提取出来替换昵称即可 from xlrd import open_workbookfrom xlutils.copy ...

阿豪boy ⋅ 今天 ⋅ 0

面试题:使用rand5()生成rand7()

前言 读研究生这3 年,思维与本科相比变化挺大的,这几年除了看论文、设计方案,更重要的是学会注重先思考、再实现,感觉更加成熟吧,不再像个小P孩,人年轻时总会心高气傲。有1 道面试题:给...

初雪之音 ⋅ 今天 ⋅ 0

Docker Toolbox Looks like something went wrong

Docker Toolbox 重新安装后提示错误:Looks like something went wrong in step ´Checking if machine default exists´ 控制面板-->程序与应用-->启用或关闭windows功能:找到Hyper-V,如果处......

随你疯 ⋅ 今天 ⋅ 0

Guacamole 远程桌面

本文将Apache的guacamole服务的部署和应用,http://guacamole.apache.org/doc/gug/ 该链接下有全部相关知识的英文文档,如果水平ok,可以去这里仔细查看。 一、简介 Apache Guacamole 是无客...

千里明月 ⋅ 今天 ⋅ 0

nagios 安装

Nagios简介:监控网络并排除网络故障的工具:nagios,Ntop,OpenVAS,OCS,OSSIM等开源监控工具。 可以实现对网络上的服务器进行全面的监控,包括服务(apache、mysql、ntp、ftp、disk、qmail和h...

寰宇01 ⋅ 今天 ⋅ 0

AngularDart注意事项

默认情况下创建Dart项目应出现以下列表: 有时会因为不知明的原因导致列表项缺失: 此时可以通过以下步骤解决: 1.创建项目涉及到的包:stagehand 2.执行pub global activate stagehand或pub...

scooplol ⋅ 今天 ⋅ 0

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部