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
		    }
		});
		
	});
})();