Extjs4.0的数据模型

Extjs4.0的数据模型

数据模型基本要讲三大部分 model  proxy  store

1．  普通Molde的创建

数据模型对真实世界中对事物在系统中的反应 

Extjs4.0中的model相当于DB中的table，或java中的class

         //我们来利用Ext.defind来创建model类

       //相当于是DB中的table，比如table名称为person，它的属性为name，age，email

       Ext.define("person",{

           extend:'Ext.data.Model',

           //fields是一个数组，用来存放字段的数组

           fields:[

              {name:'name',type:'auto'},

              {name:'age',type:'int'},

              {name:'email',type:'auto'},

           ]

       });

 

 

2．  利用Ext.regModel创建模型

3． //MVC模型中的model一定是model层,regModel相当于是继承了model，比较省力吧!

4．     Ext.regModel("user",{

5．         fields:[

6．            {name:'name',type:'auto'},

7．            {name:'age',type:'int'},

8．            {name:'email',type:'auto'},

9．         ]

10．                     });

 

 

11．              创建model实例

3种实例化对象的方法

//实例化类

       //第一种  用new关键字

       var p = new person({

           //传数值

           name:'laowang',

           age:23,

           email:'laowang@163.com'

       });

       //当使用get的时候传过去一个字段就会返回这个字段的值，这是get的用法

        alert(p.get('name'));

      

       //第二种实例化的方法  用 create方法

       var u = Ext.create("user",{

           name:'laowang',

           age:23,

           email:'laowang@163.com'

       });

       alert(u.get('age'));

      

      

       //第三种实例化的方法

       var p1 = Ext.ModelMgr.create({

           name:'laowang',

           age:23,

           email:'laowang@163.com'

       },"person");

       alert(p1.get("email"));

 

//???疑问：什么时候用单引号，什么时候用双引号？？？、

 

 

 

12．              Validations 模型类的内部的字段验证，比如验证名字不能超过6位

13．      (function(){

14．          //把错误的提示信息改成汉语，使其变得友好。

15．          Ext.data.validations.lengthMessage = "名字的长度是错误的";

16．          Ext.onReady(function(){

17．             //类的创建

18．             Ext.regModel("user",{

19．                 fields:[

20．                    {name:'name',type:'auto'},

21．                    {name:'age',type:'int'},

22．                    {name:'email',type:'auto'},

23．                 ],

24．                 //验证传值的正确性

25．                 validations:[

26．                    {type:"length",field:"name",min:2,max:6}

27．                 ]

28．             });

29．             //类的实例化

30．              var u = Ext.create("user",{

31．                 name:'laowang',

32．                 age:23,

33．                 email:'laowang@163.com'

34．             });

//开启验证

35．             var errors = u.validate();

36．             var errorsInfo = [];//便利所有的数组，并把错误放到数组中便利

37．             //each是便利   function的参数为一个object的对象

38．             errors.each(function(v){

39．                 errorsInfo.push(v.field+"   "+v.message);

40．             });

41．             alert(errorsInfo.join("\n"));

42．             //alert(errors);

43．          });

44．              })()

 

遇到一个问题 -----  乱码问题：在最上面加了一句：

Ext.data.validations.lengthMessage = "名字的长度是错误的";,并且已经把zh_CN这个包引进来了，可是还是不行啊，还是乱码

<script type="text/javascript" src="${pageContext.request.contextPath }/ext/ext-lang-zh_CN.js"></script>

 

 

44 . 自定义的验证器

         首先自己写一个扩展类，来实现判断年龄的函数

         //扩展也就是我们自定义验证机制的一个新的验证方法  --- 验证年龄的限制

        Ext.apply(Ext.data.validations,{

           age:function(config, value){

              var min = config.min;

              var max = config.max;

              if(min <= value && value <= max){

                  return true;

              } else{

                  this.ageMessage = this.ageMessage+"它的范围为是在["+min+"~"+max+"]";

                  return false;

              }

           },

           ageMessage:'age数据出现了错误'

       });

 

在开始验证，并确定验证性的正确和错误

//验证传值的正确性

           validations:[

              {type:"length",field:"name",min:2,max:6},

              {type:"age",field:"age",min:0,max:150}

           ]

 

 

45．              简单的数据代理

详细的porxy就是用来完成我们的CURD

通过js界面，运用ajax的技术来得到jsp页面的信息，并在js中输出，实现简单的数据代理

首先在jsp页面中来为类赋值：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

           response.getWriter()

                  .write("{name:'laowang',age:23,email:'322@.com'}");

    %>

在js中得到

(function(){

    Ext.onReady(function(){

       Ext.define("person",{

           extend:'Ext.data.Model',

           //fields是一个数组，用来存放字段的数组

           fields:[

              {name:'name',type:'auto'},

              {name:'age',type:'int'},

              {name:'email',type:'auto'},

           ],

           //代理,利用ajax的方式来和jsp连接，实现简单的数据代理

           proxy:{

              type:'ajax',

              url:'porson.jsp'

           }

       });

      

       //实例化类，直接得到person，与jsp相连接，赋值

       var p = Ext.ModelManager.getModel("person");

       //加载数据

       p.load(1, {

        scope: this,

        failure: function(record, operation) {

          

        },

        success: function(record, operation) {

         alert(record);

        },

        callback: function(record, operation) {

           

        }

    });

    });

})()

 

遇到一个非常严峻的问题：为什么把jsp页面写成以上的简单格式就可以，如果用myEclipse自动的创建一个jsp，就不可以呢? 以后的jsp不可能是自己手写啊！

46．              Extjs4.0的特性 molde的一对一和多对一

47．      (function(){

48．          Ext.onReady(function(){

49．             //老师类

50．             Ext.regModel("teacher",{

51．                 fields:[

52．                    {name:'teacherId',type:'int'},

53．                    {name:'name',type:"auto"}

54．                 ],

55．                 //两个类的关联

56．                 hasMany:{

57．                    model:'student',

58．                    name:'getstudent',//这里的name必须写

59．                    filterProperty:'teacher_id'

60．                 }

61．             });

62．             //学生类

63．             Ext.regModel("student",{

64．                 fields:[

65．                    {name:'studentId',type:'int'},

66．                    {name:'name',type:'auto'},

67．                    {name:'teacher_id',type:'int'}

68．                 ]

69．             });

70．          });

71．              })()