ExtJs学习01

1.普通Molde的创建

2.利用Ext.regModel创建模型

3.创建model的实例

               3种实例对象的方法

4.Validations    及自定一个验证器

5.简单了解代理，

             proxy   就是完成数据的CRUD

6.Model的一对多和多对一的了解

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

1.普通Molde的创建 

2.利用Ext.regModel创建模型

3.创建model的实例

               3种实例对象的方法

//Model类的创建
(function(){
	Ext.onReady(function(){
		//利用Ext.define来创建我们的模型类
		Ext.define("person",{
			extend:"Ext.data.Model",
			fields:[
				{name:'name',type:'auto'},
				{name:'age',type:'int'},
				{name:'email',type:'auto'}
			]
		});
	
	//MVC模式中的model一定是M层
	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:'yungengjjjjkkj;'
		});
	//alert(p.get('name'));
	var p1=Ext.create("person",{
		name:'uspcat.com',
		age:26,
		email:'yungengjjjjkkj'
	});
	//alert(p1.get('age'));
	
	var p2=Ext.ModelManager.create({
		name:'uspcat.com',
		age:26,
		email:'yungengjjjjkkj'
	}, 'person');
	alert(p2.get('email'));
	 
	
	});
})(); 

4.Validations    及自定一个验证器

//1.Validations  2.自定义验证器  
(function(){
	Ext.onReady(function(){
		Ext.data.validations.lengthMessage="错误的长度";
		
		//扩展也就是我们自定义验证机制的一个新的验证方法
		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 p1=Ext.create("person",{
			name:'uspcat.com',
			age:-26,
			email:'yungengjjjjkkj'
		});
		var errors=p1.validate();
		var errorInfo=[];
		errors.each(function(v){
			//alert(v);
			errorInfo.push(v.field+"  "+v.message);
		});
		alert(errorInfo.join("\n"));
		
			});
})();
	

5.简单了解代理，

             proxy   就是完成数据的CRUD

 //数据代理1.定义一个类，2.实例化（用代理类),3.导入外界数据
(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'          //数据是从.jsp文件中得到的
		}
	});
	//实例化一个对象,用的是代理
	var p=Ext.ModelManager.getModel("person");
	p.load(1, {
	    scope: this,
	    failure: function(record, operation) {
	        //do something if the load failed
	    },
	    success: function(record, operation) {
	        //do something if the load succeeded
	    	alert(record.data.name);
	    },
	    callback: function(record, operation) {
	        //do something whether the load succeeded or failed
	    }
	});
	
})();

JSP代码如下：

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

    System.out.println(request.getParameter("id"));
    response.getWriter().write("{name:'uspcat.com',age:26,email:'yfc@wfc.com'}");
%>

6.Model的一对多和多对一的了解

//Model的一对多，先简单了解.
(function(){
	Ext.onReady(function(){
		//类
	Ext.regModel("teacher",{
		fideld:[
		        {name:'teacherId',type:"int"},
		        {name:'name',type:"auto"}
		        ],
		        hasMany: {
		            model: 'student',
		            name : 'getStudent',     //函数
		            filterProperty: 'teacher_Id'    //关联的字段
		        }
	});
	//学生
	Ext.regModel("student",{
		fideld:[
		        {name:'studentId',type:"int"},
		        {name:'name',type:"auto"},
		        {name:"teacher_Id",type:'int'}   
		        ]
	});
	//t.students   得到子类的一个store数据集合
	});
})()