ExtJs学习二

Extjs中的model数据模型

(function(){
	Ext.onReady(function(){
		//数据模型基本要讲三个大部分 model proxy store
		//数据模型对真实世界中对事物在系统中的反应   extjs4.0中的mode相当于 DB中的table 或 JAVA 中的Class
		//1.普通Molde的创建
		Ext.define("user",{
			extend:"Ext.data.Model",
			fileds:[
			    {name:"name",type:"auto"},
			    {name:"age",type:"int"},
			    {name:"email",type:"auto"},
			    ]
		});
		//2.利用Ext.regModel创建模型
		//如果使用regModel则不需要使用extend
		Ext.regModel("person",{
			fileds:[
				    {name:"name",type:"auto"},
				    {name:"age",type:"int"},
				    {name:"email",type:"auto"},
			  ]
		});
		//3种方法创建model的实例
		//1.使用new关键字实例化person
		var p=new person({
			name:"hanhan",
			age:23,
			email:"[email protected]"
		});
		//2.使用Ext.create实例化person
		var p1=Ext.create("person",{
			name:"hanhan",
			age:23,
			email:"[email protected]"
		});
		//3.使用Ext.ModelMgr.create实例化person
		
		var p2=Ext.ModelMgr.create({
			name:'hanhan',
			age:23,
			email:'[email protected]'
		},'person');
		/*
		var p2=Ext.ModelMgr.create({
			name:'uspcat.com',
			age:26,
			email:'[email protected]'
		},'person');
		*/
		alert(p2.get("email"));
		//获取类的名称
		alert(person.getName());
	});
})();

Extjs中的validations验证

(function(){
	Ext.onReady(function(){
		//自定义一个验证age的验证器
		Ext.apply(Ext.data.validations,{
			//config为参数，value为值
			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.data.validations.lengthMessage = "错误的长度";
		//定义person类
		Ext.regModel("person",{
			fileds:[
				    {name:"name",type:"auto"},
				    {name:"age",type:"int"},
				    {name:"email",type:"auto"},
			  ],
		//validation定义验证
		validations: [
		      //验证名字的长度
              {type: 'length',  field: 'name',min:5,max:10},
              //验证年龄的大小
              {type:"age", field:"age", min:0,max:160}
             
          ]
		});
		
		var p=new person({
			name:"han",
			age:-26,
			email:"[email protected]"
		});
		
		alert(p.get("name"));
		//执行验证，返回错误集合
		var errors=p.validate();
		var errorinfo=[]; //定义一个数组，保存错误的信息
		//遍历错误集合，参数v为一个对象
		errors.each(function(v){
		  //field是错误的字段  message是错误的信息
		  errorinfo.push(v.field+"  "+v.message);
		});
		//打印错误的信息
		alert(errorinfo.join("\n"));
	});
})();

Extjs中简单的代理proxy

index.jsp页面的内容为:
<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%
response.getWriter().write("{name:'uspcat.com',age:26,email:'[email protected]'}");
%>


(function(){
	Ext.onReady(function(){
		Ext.define("user",{
			extend:"Ext.data.Model",
			fileds:[
			    {name:"name",type:"auto"},
			    {name:"age",type:"int"},
			    {name:"email",type:"auto"},
			    ],
			proxy:{
				type:"ajax",  //代理的方式
				url:"index.jsp"  //代理的url
			}
		});
		//通过getModel获取user的model对象
		var u= Ext.ModelManager.getModel('user');
		//参数1应该是id号，加载数据
		u.load(0, {
		    scope: this,
		    failure: function(record, operation) {
		        //do something if the load failed
		    },
		    success: function(record, operation) {
		        //do something if the load succeeded
//data获取到的是个对象为{name:'uspcat.com',age:26,email:'[email protected]'}
		    	//alert(record.data);
//打印u对象获取的name
           Alert(record.data.name);
		    },
		    callback: function(record, operation) {
		        //do something whether the load succeeded or failed
		    }
		});
		
	});
})();