zoukankan      html  css  js  c++  java
  • Ext.data.Model

    转:http://blog.sina.com.cn/s/blog_7778950d0100xgel.html

    在发布的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"
    },
     
    hasMany:[{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中的四大特性,有什么欠缺之处,还希望大家指正。大家一起交流。

    extjs 4.2.0 中原来的  Ext.data.Record 对应 Ext.data.Model

    取值:

    取得record中某字段的值:

    record.get('字段名称'); 返回string值

     mapping 属性,{name:'id',type:'int',mapping:'Fid'}//id 是个虚拟字段,数据源于 Fid

  • 相关阅读:
    Google Map API使用详解(三)——Google Map基本常识(上)
    Google Map API使用详解(十)——使用JavaScript创建地图详解(上)
    sethc.exe
    taobao_java
    "void __cdecl operator delete[](void *)" (??_V@YAXPAX@Z) 已经在 LIBCMTD.lib(delete2.obj) 中定义 错误
    some Content
    变参 C++ 转帖
    阅读大型程序你得到什么
    一些模块
    a common jsp
  • 原文地址:https://www.cnblogs.com/xsSystem/p/3096131.html
Copyright © 2011-2022 走看看