程序博客网 > 网络作家富豪榜2017年

Ext之 model,one2many.proxy.validation _____lesson3

来源：互联网发布：网络作家富豪榜2017年编辑：程序博客网时间：2024/05/05 23:19

------------------------lesson3.html-------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>EXTJS4.0</title>
<link rel="stylesheet" type="text/css" href="../../../../extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="../../../../extjs4/bootstrap.js"></script>
<script type="text/javascript" src="../../../../extjs4/locale/ext-lang-zh_CN.js"></script>


<script type="text/javascript" src="proxy.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
</body>

</html>

--------------------------model.js----------------------------------------------------------------

(function(){
   Ext.onReady(function(){
       //我们利用Ext.define来创建我们的模型类
       //DB table person(name,age,email)
       Ext.define("person",{
           extend:"Ext.data.Model",
           fields:[
               {name:'name',type:'auto'},
               {name:'age',type:'int'},
               {name:'email',type:'auto'}
           ]
       });
       //MVC模式中model一定是M层    这样可以不用写   extend:"Ext.data.Model",   直接就返回model;
       Ext.regModel("user",{
           fields:[
               {name:'name',type:'auto'},
               {name:'age',type:'int'},
               {name:'email',type:'auto'}
           ]
       });
       //实例化我们的person类
       //1.new关键字
       var p = new person({
           name:'uspcat.com',
           age:26,
           email:'yunfengcheng2008@126.com'
       });
       //alert(p.get('name'));
       var p1 = Ext.create("person",{   // 建议使用;
           name:'uspcat.com',
           age:26,
           email:'yunfengcheng2008@126.com'
       });
       //alert(p1.get('age'));
       var p2 = Ext.ModelMgr.create({
           name:'uspcat.com',
           age:26,
           email:'yunfengcheng2008@126.com'
       },'person');
       //alert(p2.get('email'));
       //alert(p2.getName());//? class object.getClass.getName 不可以这样来获得class; 因为p2 是个对象; 需要用类 getName 方法来获取class;如下面person.getName
       alert(person.getName());
   });
})();

---------------------------------------------------------one2many--------------------------------------

(function(){
   Ext.onReady(function(){
       //类    老师
       Ext.regModel("teacher",{
           fideld:[
               {name:'teacherId',type:"int"},
               {name:'name',type:"auto"}
           ],
           hasMany:{ // 和学生一对多;
               model: 'student',
                 name : 'getStudent',       // 得到子类的一个store数据集合
                  filterProperty: 'teacher_Id'   // 外键名字; 和下面管理的学生的teacher_Id 保持一致;
           }
       });
       //学生
       Ext.regModel("student",{
           fideld:[
               {name:'studentId',type:"int"},
               {name:'name',type:"auto"},
               {name:"teacher_Id",type:'int'}
           ]
       });
       //t.students (这里是students 而不是student) 得到子类的一个store数据集合   如果没有写 name : 'getStudent', 的话;可以这样获取;
   })
})();

---------------------------------------------------person.jsp---------------------------------------

<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%
System.out.println(request.getParameter("id"));
response.getWriter().write("{name:'uspcat.com',age:26,email:'yfc@126.com'}");

------------------------------------------------proxy.js--------------------------------------------------------------

(function(){   // proxy; 用来完成数据的 crud'
   Ext.onReady(function(){
       Ext.define("person",{
           extend:"Ext.data.Model",
           fields:[
               {name:'name',type:'auto'},
               {name:'age',type:'int'},
               {name:'email',type:'auto'}
           ],
           proxy:{
               type:'ajax',
               url:'person.jsp'
           }
       });
       var p = Ext.ModelManager.getModel("person"); // 获取一个属性为空的   person实例化对象
       p.load(1, { // 这里1 是id;
            scope: this,
            failure: function(record, operation) {
            },
            success: function(record, operation) {
               alert(record.data.name)              // data 对象是个对象;
            },
            callback: function(record, operation) {
            }
       });
   })
})();

------------------------------------validation.js--------------------------------------------------------------

(function(){
   Ext.data.validations.lengthMessage = "错误的长度";
   Ext.onReady(function(){
       //扩展也就是我们自定义验证机制的的一个新的验证方法
       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数据出现的了错误' // 这里似乎要和 age 类名保持一致; 如 msg 类里面需要msgMessage;
       });


       Ext.define("person",{
           extend:"Ext.data.Model",
           fields:[
               {name:'name',type:'auto'},
               {name:'age',type:'int'},
               {name:'email',type:'auto'}
           ],
           validations:[
               {type:"length",field:"name",min:2,max:6},
               {type:'age',field:"age",min:0,max:150}
           ]
       });
       var p1 = Ext.create("person",{
           name:'uspcat.com',
           age:-26,
           email:'yunfengcheng2008@126.com'
       });
       var errors = p1.validate(); // p1 里面有validations; 调用p1.validatae方法返回一个错误的数组;
       var errorInfo = [];
       errors.each(function(v){    // 遍历error 的时候断点打出来的属性; v 是个对象; v.field;
           errorInfo.push(v.field+" "+v.message);
       });
       alert(errorInfo.join("\n"));
   });
   /**
   * name 2~6
   * set(String name){
   *    if(){
   *    }else{
   *    }
   * }
   */
   //age 不能小于0也不能大于150
})();

网络作家富豪榜2017年

网络作家富豪榜2017年

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子哈尔滨地铁二号线深圳二号线线路图徐州二号线常州地铁二号线长沙二号线线路图西安二号线时刻表大连地铁二号线北京二号线故障北京地铁二号线合肥二号线武汉二号线时刻表天津地铁二号线广州二号线线路图天津二号线重庆二号线合肥地铁二号线苏州地铁二号线深圳地铁二号线深圳二号线合肥二号线线路图十二号线蓉二号线南京地铁二号线线路图南京地铁二号线时刻表西安地铁二号线线路图武汉地铁二号线线路图福州地铁二号线线路图成都地铁二号线线路图西安地铁二号线时刻表武汉地铁二号线运营时间上海二号线首末车时间南宁地铁二号线线路图长沙地铁二号线线路图成都二号线地铁路线合肥地铁二号线线路图广州地铁二号线线路图南昌地铁二号线运营时间西安二号线地铁路线图沈阳地铁二号线线路图成都地铁二号线线路南昌地铁二号线线路图