11、ExtJs——数据模型

数据模型的三大基本部分：model   proxy  store

1、普通Model的创建：数据模型对真实世界中对事物在系统中的反映，ExtJs中的model相当于DB中的table 或Java中的Class

2、利用Ext.regModel创建模型

3、创建model的实例  ：实例化对象的方法

4、Validations

5、自定义验证器

6、简单数据代理

7、Model的一对多和多对一

--------------------------------------------------------------------

插一段，突然发现ExtJs的API中有config，有properties，配置项和属性，对此很疑惑，查了一下百度：

Config Options下的内容为你在实例化一个对象时进行配置，也就是比如new Panel({a:"xxx",b:"yyy"})，这里的a和b就是来自于Config Options 
就拿tree下的TreeNode来说:
Config Options下的checked
checked : Boolean 
True to render a checked checkbox for this node, false to render an unchecked checkbox (defaults to undefined with no... 
True to render a checked checkbox for this node, false to render an unchecked checkbox (defaults to undefined with no checkbox rendered)
TreeNode是树节点的意思，那么肯定也就是一个节点
而checked很明显我们就能猜出来是 是否选中 的意思
这个checked是在Confgi Options下的，是实例化的时候用的，注意这点，其他时候能否用你是不知道的
而且这个配置选项的值必须只接受boolean类型的，也就是true或false
比如 var root = new Ext.tree.TreeNode({checked:true});
比如href : String 表示的配置选项href接受的类型是string的
这个所谓的配置选项，也就是Config Options下的内容，只有你在实例化的时候用的，也就是你在new 类名({...})时用的然后你再看 Public Properties 部分看这个childNodes ，public properties下的childNodes : Array 这样写表示的是你从一个实例化对象里取得的属性，比如你刚才 var tn = new Ext.tree.treeNode({....});这样已经实例化了一个对象了,那么现在你可以取实例化对象的数据了,怎么取呢，可以取里面的什么东西呢，那么这里public properties里的列出的就是你能取的,那么你要tn.childNodes就能获得一个Array类型的数据,所以public properties下列出的就是一个实例化对象能取的信息，冒号后面的是你索取得的信息的返回类型

还有一个简短回答：

就像构造方法参数，和成员变量的区别

主要在Ext.data下

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.regModel('User',{         //运行时提示：Ext.regModel has been deprecated.
		fields:[
			{name:'name',type:'auto'},
			{name:'age',type:'int'},
			{name:'email',type:'auto'}
		]
	});
	*/
	//实例化一个类Person
	//1、new关键字
	var p = new Person({
		name:'nnnnn',
		age:32,
		email:'yyd@com.com'
	});
	alert(p.get('name'));
	//2、Ext.create方法
	var p1 = Ext.create('Person',{
		name:'nnnnn',
		age:32,
		email:'yyd@com.com'
	});
	
	alert(p1.get('age'));
	
	//3、使用Ext.ModelManager的create方法，模型管理器的创建方法，注意参数顺序
	var p2 = Ext.ModelManager.create({
		name:'nnnnn',
		age:32,
		email:'yyd@com.com'
	},'Person');
	alert(p2.get('email'));
	//获取类的名称
	alert(Person.getName());
});

模型验证：validations

Ext.onReady(function(){
	
	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}
		
		]
	});
	
	var p = new Person({
		name:'nnnnnnnnnnnn',
		age:-32,
		email:'yyd@com.com'
	});
	/**
	 * 校验
	 * name  ：2~6
	 * age：0~150
	 */
	//错误信息是在Ext.data.validations.lenghtMessage中保存的，修改一下,进行汉化
//	Ext.data.validations.lengthMessage = '错误的长度';
	var errors = p.validate();
	var errorInfo = [];
	errors.each(function(v){
		console.info(v);    //v:Object {field: "name", message: "is the wrong length"} 
		errorInfo.push(v.field + " " + v.message);	
	});
	alert(errorInfo.join("\n"));//alert  name is the wrong length
	
	//
});

在Model的配置项的validations中，能够配置验证项（系统给定的几种）

然后我们自己扩展Ext.data.validations，增加我们自己的验证机制：

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数据错误'
	});
	
	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 p = new Person({
		name:'nnnnnnnnnnnn',
		age:-32,
		email:'yyd@com.com'
	});
	/**
	 * 校验
	 * name  ：2~6
	 * age：0~150
	 */
	//错误信息是在Ext.data.validations.lenghtMessage中保存的，修改一下,进行汉化
//	Ext.data.validations.lengthMessage = '错误的长度';
	var errors = p.validate();
	var errorInfo = [];
	errors.each(function(v){
		console.info(v);    //v:Object {field: "name", message: "is the wrong length"} 
		errorInfo.push(v.field + " " + v.message);	
	});
	alert(errorInfo.join("\n"));//alert  name is the wrong length
	
	//
});

简单地数据代理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:'base/person.jsp'
		}
	});
	
	var p = Ext.ModelManager.getModel('Person'); //没有数据的Model对象
	p.load(1,{             //加载数据，就是执行代理获取数据
		scope:this,
		failure: function(record, operation) {
	    },
    	success: function(record, operation) {
    		alert(record.data.name);
    	},
   		callback: function(record, operation, success) {
    	}
	});
	
	
});

model中的proxy，配置项type有ajax一种，就是提交一个url获取数据，这里person.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
		System.out.println("id=" + request.getParameter("id"));
		response.getWriter().write("{name:'cdf',age:34,email:'wer@com.com'}");
%>

record参数是一个对象，其中的data属性包含了传递过来的数据：{name: "cdf", age: 34, email: "wer@com.com", id: 1}
load的第一个参数是id。这个很重要

一对多的例子：

Ext.onReady(function(){
	//教师类
	Ext.define('Teacher',{
		extend:'Ext.data.Model',
		fields:[
			{name:'teacherId',type:'int'},
			{name:'name',type:'auto'}
		],
		hasMany:{
			model:'Student',
			name:'getStudent',
			filterProperty:'teacher_Id'
		}
	});
	//学生类
	Ext.define('Student',{
		extend:'Ext.data.Model',
		fields:[
			{name:'studentId',type:'int'},
			{name:'name',type:'auto'},
			{name:'teacher_Id',type:'int'}
		]
	});
});