EXTJS4 新特性之Ext.data.Model

EXTJS4 新特性之Ext.data.Model

  (2011-09-30 15:08:56)

分类： EXTJS4

在发布的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);//遍历验证的信息

});

以上就是Model中的四大特性，有什么欠缺之处，还希望大家指正。大家一起交流。