ExtJS4学习笔记(十五)---Ext.data.Model

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){
//处理加载完成的逻辑
}
});
service.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:"servicee/servicee.aspx",
reader:"json"
},
hasMany:[{model:"subject",name:"subjects"}]


});
在我们定义好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);//遍历验证的信息
});

原文链接:http://blog.sina.com.cn/s/blog_7778950d0100xgel.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯智能台灯

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值