Extjs系列篇(3)—-model数据模型
一、Model的两种创建方式
model就相当于java中的类,下面我们就来用两种方式来进行创建。
1.define方式创建model:
1 Ext.define("person",{ 2 extend:"Ext.data.Model", 3 fields:[ 4 {name:'name',type:'auto'}, 5 {name:'age',type:'int'}, 6 {name:'email',type:'auto'} 7 ] 8 });
采用这种方式,第一个参数是model的名称,需要继承自Ext.data.Model,同时给定字段名称和类型。
2.采用regModel的方式创建model:
1 Ext.regModel("user",{ 2 fields:[ 3 {name:'name',type:'auto'}, 4 {name:'age',type:'int'}, 5 {name:'email',type:'auto'} 6 ] 7 });
这种方式比第一种稍许简洁,不需要继承,因为它默认返回就是一个model。
二、创建Model的实例
创建model的实例有3种方式,model就相当于一个class,而model的实例就相当于类的对象。
1.new方式创建实例:
1 var p = new person({ 2 name : 'luoxiao', 3 age:26, 4 email:"3435@12.com" 5 });
这种创建的方式和我们java中创建对象一样,比较形象化。
2.create方式创建实例:
1 var p1 = Ext.create("person",{ 2 name : 'luoxiao', 3 age:26, 4 email:"3435@12.com" 5 });
第一个参数给定创建的model的名称,其次给定参数,这样就可以创建一个实例。
3.ModelMgr创建实例:
var p2 = Ext.ModelMgr.create({ name : 'luoxiao', age:26, email:'3435@12.com' },'person');
这种方式参数上和第二个方式是相反的。
三、自定义验证
Ext中给我们提供了一些常用的验证方式,但是这不能完全满足我们的需求,我们可以再此基础上自己进行扩展,自定义验证的一系列规则。首先我们先扩展validation:
1 Ext.apply(Ext.data.validations,{ 2 age : function(config,value){ 3 var min = config.min; 4 var max = config.max; 5 if(min <= value && value<=max){ 6 return true; 7 }else{ 8 this.ageMessage = this.ageMessage+"应该在["+min+"~"+max+"]"; 9 return false; 10 } 11 }, 12 ageMessage:'age数据出现了错误' 13 });
Ext.apply用于实现把一个对象中的属性应用于另外一个对象中,相当于属性拷贝。也就是说,我们扩展的age这个属性的规则将会应用到Ext.data.validations中去,在age的function中,第一个参数是配置的参数属性,第二个是传递的值。下面,我们定义一个model来应用这种验证:
1 Ext.define("person",{ 2 extend:"Ext.data.Model", 3 fields:[ 4 {name:'name',type:'auto'}, 5 {name:'age',type:'int'}, 6 {name:'email',type:'auto'}, 7 ], 8 validations:[ 9 {type:"length",field:"name",min:2,max:6}, 10 {type:"age",field:"age",min:0,max:150} 11 ] 12 });
可以看到,我们对name的length进行了验证,包括自定义的age,提供了最小值和最大值。
1 var p1 = Ext.create("person",{ 2 name : 'luoxiao', 3 age:-26, 4 email:"3435@12.com" 5 });
这里创建一个person的实例,age为-26,不满足给定的验证条件。
1 var errors = p1.validate(); 2 var errorInfo = []; 3 errors.each(function(v){ 4 errorInfo.push(v.field+" "+v.message); 5 }); 6 alert(errorInfo.join("\n"));
验证后得到错误提示。
四、简单数据代理
什么是数据代理,数据代理就是来完成数据的CURD。
1 (function(){ 2 Ext.onReady(function(){ 3 Ext.define("person",{ 4 extend:"Ext.data.Model", 5 fields:[ 6 {name:'name',type:'auto'}, 7 {name:'age',type:'int'}, 8 {name:'email',type:'auto'}, 9 ], 10 proxy:{ 11 type:'ajax', 12 url:'lesson3/person.jsp' 13 } 14 }); 15 16 var p = Ext.ModelMgr.getModel("person"); 17 18 p.load(1, { 19 scope: this, 20 failure: function(record, operation) { 21 }, 22 success: function(record, operation) { 23 alert(record.data.name); 24 }, 25 callback: function(record, operation, success) { 26 } 27 }); 28 }); 29 })();
这里使用的ajax的方式去请求数据,将jsp中的数据请求到然后load进去。
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 3 <% 4 response.getWriter().write("{name:'uspcat.com',age:26,email:'luoxiao.com'}"); 5 %>
五、model的一对多
1 (function(){ 2 Ext.onReady(function(){ 3 //teacher 4 Ext.regModel("teacher",{ 5 fields:[ 6 {name:'teacherId',type:'int'}, 7 {name:'name',type:'auto'} 8 ], 9 hasMany:{ 10 //与谁有关系 11 model:'student', 12 name:'getStudent', 13 filterProperty:'teacher_Id' 14 } 15 }); 16 17 //student 18 Ext.regModel("student",{ 19 fields:[ 20 {name:'studentId',type:'int'}, 21 {name:'name',type:'auto'}, 22 {name:'teacher_Id',type:'int'} 23 ] 24 }); 25 26 //t.students 可以得到子类的一个store数据集合 27 28 }); 29 })();