extjs4新特性Ext.data.model

在发布的ExtJS4版本中,在data包中新增加了一个类Model(模型类)。这个类有点类似于ExtJS3.x中的record,但是新添加的Model的功能要比record类的功能强大的多,下面我们就是一起讨论一下。Model类的功能:

(一)、首先我们介绍一下Model类中比较常用的几个属性,如果我们想构建一个Model类,最主要的属性就是(Fields)属性,这个属性接受一个数组。用来设置Model中所包含的字段。定义的格式如下:

Ext.regModel("Student",{

fields:[

{name:"name",type:"string"},

{name:"class",type:"string"}

]

});

(二)、在我们了解到怎么定义一个简单的Model,以及定义Model所需要的属性时。下面我们来看一下。Model类为我们提供了哪些比较好的功能。

1、首先我们来看一下fields属性中的功能,例如:我们现在定义了一个如上的Model类,然后,数据源返回班级(class)这个属性时。格式为(1、2、3),如果我们把这样的数据呈现出来,那么将显示的很不友好。所以,我们要在呈现之前,对数据做一个转换。把原本不友好的数据,转换成有好的数据,这就用到了。fields中的convert属性。具体的代码如下(注意红色字体部分):

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 "三班"};

}}

]

});

通过上边的设置,我们就对数据做了相应的转换了,呈现到客户面前的不再是(1、2、3),这样我们的呈现就变得比较友好了。

2、另外,在我们定义好一个Model类之后,我们就可以使用这个Model类。最简单的方式,我们是直接new一个Model类的对象,然后将我们的数据信息加载到对象中,有点类似于Ext3.X中的record的对象的使用。代码如下:

var student=new Student({

name:"Jerry",

class:"2"

});

上述代码我们根据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:"data/1.aspx",

reader:"json"

}

});

Student.load(001,{

success:function(student){

//处理加载完成的逻辑

}

});

1.aspx返回的数据格式:

{id:001,name:"zhangsan",class:"2"}

经过上述的设置,我们的Model就可以与后台交互,并要求后台返回我们想要的数据了,这个也是之前record类所办不到的。

3、在我们的应用程序中,可能我们定义的Model不止一个。但是,他们之间可能都是独立的,没有任何的关系,但是,在我们的应用程序中可能在后台返回的数据中存在一定的联系,而且我们又想让这些Model之间存在一定的联系,这样我们在处理起来,会比较简单一些。大家看下边的一段数据。

{

id:"009",

name:"Jerry",

subjects:[

{id:"001",name:"English"},

{id:"002",name:"Mathematics"}

]

}

在上述的数据中,科目和学生之间是有一定的联系的。所以,我们也在想,解析数据的时候,让他们保持这种联系,以便于我们更好的解析数据。这样我们就用到了Model中的belongsTo和hasMany这样两个属性。首先要解析这样的数据,我们需要定义好我们的Model类。如下:

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:"data/1.aspx",

reader:"json"

},

h
asMany:[{model:"subject",name:"subjects"}]

});

注意“hasMany”和“belongsTo”的使用。

在我们定义好Model后,下面我们就可以加载并解析我们的数据了。

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或false

stuvalidate.each(function(error){

alert(error.field+" "+error.message);//遍历验证的信息

});

extjs4新特性Ext.data.model

时间: 2024-07-30 20:32:23

extjs4新特性Ext.data.model的相关文章

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

Model代表应用程序管理的一些对象.例如,我们可能会为 我们想在系统中建模的现实世界中的一些物体像使用者.产品和汽车等定义一个Model.这些Model在 Ext.ModelManager中注册,被Ext.data.Store使用, 而这些Ext.data.Store又被许多 Ext中许多与数据绑定的组件使用. 直接上代码: <%-- Created by IntelliJ IDEA. User: Administrator Date: 2015/12/13 0013 Time: 08:51

Extjs的form表单自动装载数据(通过Ext.data.Model的代理加载数据)

在做项目的时候遇到一个问题,以前双击grid页面一行数据的时候,会吧双击这一行的数据自动加载到双击的页面(Ext的弹出框),可以通过this.down(''form).getForm().loadRecord(record)来自动加载,可是现在有一个需求就是双击grid一行弹出一个新的浏览器页面(不是ext的弹出框,通过window.open()实现),只能把双击的id传到页面,再重新查数据手动赋值,如果一个页面字段很多,一个一个赋值是很辛苦的,所以就想能不能自动装载数据 通过长时间研究发现,t

ExtJS笔记 Ext.data.Model

A Model represents some object that your application manages. For example, one might define a Model for Users, Products, Cars, or any other real-world object that we want to model in the system. Models are registered via the model manager, and are us

ExtJS教程(5)---Ext.data.Model之高级应用

1.Model的数据验证 这里借助官方的一个例子来说Model数据验证的基本用法 Ext.define('User', { extend: 'Ext.data.Model', fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int' }, { name: 'phone', type: 'string' }, { name: 'gender', type: 'string' }, { name: 'username

11G新特性 -- flashback data archive(2)

创建Flashback Data Archive用户需要授予dba或flashback archive administer系统特权.flashback archive administer系统特权包含:create flashback archive,alter flashback archive,drop flashback archive权利. SQL> select * from dba_sys_privs where privilege like '%FLASH%'; GRANTEE

ExtJS 4 【Ext.data.proxy.Ajax】

namespace ExtJSProject.WebApi.Models { [Serializable] [DataContract] public class Person { [DataMember] public string Name { get; set; } [DataMember] public int Age { get; set; } } }   namespace ExtJSProject.WebApi.Controllers { [RoutePrefix("api/Per

Extjs5.1中的新特性

Ext JS 5.0.1 is a maintenance release that addresses many bugs and limitations discovered by our community while testing Ext JS 5.0.0. We believe this update significantly strengthens the Ext JS 5 branch and we’re excited to hear your feedback. If yo

22. SQL -- SQL Server 2005 和SQL Server 2008新特性

SQL SERVER 2005 与SQL SERVER 2008 新特性   SQLSERVER 2005 新特性 Enhanced Data Types:存储最大8K-2G Partitioned Table(分区表):数据拆分管理 背景:一个公司,有目前现存数据以及历史数据,各在一台SER 上,服务器访问方式: SQL 2000 TABLE 1:在一张table 中,对数据进行分区 Enhanced Indexing Features SER 1 SER 2 现存数据 TABLE 1 TAB

&#39;Ext.data.Store&#39; 中的 load

//产品store       window.product_store=Ext.create('Ext.data.Store',{  fields:[            'id',            'aid',            'webid',            'title',            'kindlist',            'attrid',            'ishidden',            'displayorder',