ExtJS4学习笔记(十五)---Ext.data.Model
来源:互联网 发布:sql server 注释 编辑:程序博客网 时间:2024/05/19 17:26
extjs4.0中,在data类中新增加了一个Model(模型类),这个类有点类似于extjs3.x中的record。Model类功能非常强大,尤其在extjs4.0 MVC开发中,非常实用。
如何定义Model类:
Ext.regModel("Student",{ fields:[{name:"name",type:"string"},{name:"class",type:"string"} ]});
Model类中最重要的属性就是Fields,这个属性接受一个数组,用来设置显示数据中所包含的字段,"Student"设置了该类的名字。
Model类的功能:
Ext.regModel("Student",{ fields:[{name:"name",type:"string"},{name:"class",type:"string",convert:function(val){if(val=="1"){return"一班"};if(val=="2"){return"二班"};if(val=="3"){return"三班"};}} ]});
首先我们来看一下fields属性中的功能,例如:我们现在定义了一个如上的Model类,然后,数据源返回班级(class)这个属性时。格式为(1、2、3),如果我们把这样的数据呈现出来,那么将显示的很不友好。所以,我们要在呈现之前,对数据做一个转换。把原本不友好的数据,转换成有好的数据,这就用到了。fields中的convert属性。
var student=new Student({name:"test",class:"3"});
2、定义好一个Model类之后,我们就可以使用这个Model类。最简单的方式,我们是直接new一个Model类的对象,然后将我们的数据信息加载到对象中,有点类似于Ext3.X中的record的对象的使用。
上述代码我们根据Student的模型类,定义了一个该类的对象,但在实际应用程序中,像这样的情况很少,毕竟我们的数据不一定都是这种一成不变的数据,有时候我们需要从后台加载我们的数据,然后给于我们的model类。这就需要我们的模型类有能够请求后台的能力,这也是Model中提供的第二个功能,Model中提供一个属性proxy(代理)。这个proxy中有几个比较重要的属性(type、url、reader),type属性值是一个字符串形式,用来表明。该代理的一种类型,具体的可以查看API中了解有哪些类型,url也就是请求后台的url。reader,也就是我们要用什么样的阅读器,来解析我们的数据:
Ext.regModel("Student",{ fields:[{name:"name",type:"string"},{name:"class",type:"string",convert:function(val){if(val=="1"){return "一班"};if(val=="2"){return "二班"};if(val=="3"){return "三班"};}} ], proxy:{type:"rest",url:"server/service.aspx",reader:"json" }});Student.load(001,{success:function(student){//处理加载完成的逻辑}});
{id:"009",name:"Jerry",subjects:[{id:"001",name:"English"},{id:"002",name:"Mathematics"}]}
Ext.regModel("subject",{fields:[{name:"id",type:"string"},{name:"name",type:"string"}],belongsTo:"Stdudent"});Ext.regModel("Student",{fields:[{name:"id",type:"string"},{name:"name",type:"string"}],proxy:{type:"rest",url:"servicee/servicee.aspx",reader:"json"},hasMany:[{model:"subject",name:"subjects"}]});
Student.load("009",{success:function(student){alert(student.get("id"));alert(student.subjects().getCount());//我们可以直接访问该学生的科目}})});
4、在ExtJS4的Model中还提供了对字段列的验证功能。我们想验证字段只需要设置Model类的validations属性即可,代码如下:
Ext.regModel("Student",{fields:[{name:"id",type:"string"},{name:"name",type:"string"}],proxy:{type:"rest",url:"data/1.aspx",reader:"json"},hasMany:[{model:"subject",name:"subjects"}],validations:[{type:"presence",field:"id"},{type:"length",field:"name",min:3}]});var student=new Student({id:"001",name:"z"});var stuvalidate=student.validate();//得到验证类stuvalidate.isValid();//返回验证结果true或falsestuvalidate.each(function(error){alert(error.field+" "+error.message);//遍历验证的信息});
原文链接:http://blog.sina.com.cn/s/blog_7778950d0100xgel.html
- ExtJS4学习笔记(十五)---Ext.data.Model
- EXTJS4 Ext.data.TreeStore model
- EXTJS4 新特性之Ext.data.Model
- EXTJS4 新特性之Ext.data.Model
- 转载:EXTJS4 新特性之Ext.data.Model
- Extjs4.0数据包(Ext.data.package)以及数据模型(Ext.data.model介绍)详解
- Ext.data 学习笔记
- ExtJs学习(一) Ext.data.Model
- Ext.data.Model
- 继承Ext.data.Model
- hybris学习笔记:Trail ~ New Data Model
- (文档翻译)Ext.data.Model
- ExtJs教程----Ext.data.Model的Ajax
- ExtJs4学习(十五)Button(按钮)用法
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(5) Ext.Button 按钮
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJS4学习笔记(十一)---TabPanel
- ExtJS4学习笔记(十二)---选项卡(tabs)
- ExtJS4学习笔记(十三)---上传文件(upload)
- ExtJS4学习笔记(十四)--- ComponentQuery
- ExtJS4学习笔记(十四)--- ComponentQuery
- ExtJS4学习笔记(十五)---Ext.data.Model
- ExtJS4学习笔记(十六)---Combobox三级联动
- jquery操作"元素属性"
- Extjs4 学习笔记源码---Extjs4 Demo(1-9)
- Extjs4 API文档阅读(一)——类系统(Class System)
- Extjs4 API文档阅读(二)——MVC构架(上)
- Extjs4 API文档阅读(二)——MVC构架(下)
- Extjs4 API文档阅读(三)——布局和容器
- Extjs4 API文档阅读(四)——Data