extJs_数据模型代理

client代理：

内存代理：将数据存储在内存中

/**
 * 内存带来数据存储在内存中
 */
Ext.onReady(function(){
	Ext.define("User",{
		extend:"Ext.data.Model",
		fields:[
			{name:"id",type:"string"},
		    {name:"name",type:"string"},
		    {name:"age",type:"int"}
		]
	});
	
	var data = {
		users:[
		   {id:1,name:"name1",age:12},
		   {id:2,name:"name2",age:10}
		]
	};
	
	var memoryProxy = Ext.create("Ext.data.proxy.Memory",{
		model:"User",
		data:data.users
	});
	
	data.users.push({id:3,name:"name3",age:10});
	
	memoryProxy.update(Ext.create("Ext.data.Operation",{
		action:"update",
		data:data.users
	}),
	function(v){
		alert(v);
	},this);
	
	
	var recodes = null;
	memoryProxy.read(Ext.create("Ext.data.Operation"),function(v){
		recodes = v.resultSet.records;
	},this);
	
	var arrs = [];
	Ext.Array.each(recodes,function(item){
		arrs.push(item.get("id")+" "+item.get("name")+" "+item.get("age"));
	},this);
	
	alert(arrs.join("\n"));
	
});

本地代理：类似cookie中，浏览器即使退出或打开多浏览器数据仍然保存

/**
 * 本地带来类似cookie的作用
 */
Ext.onReady(function(){
	
	Ext.define("Person",{
		extend:"Ext.data.Model",
		fields:[
		   {name:"name",type:"string"}
		],
		proxy: {
	        type: 'localstorage',
	        id  : 'twitter-Searches'
	    }
	});
	
	var store = Ext.create('Ext.data.Store', {
	    model: "Person"
	});
	store.add({name: 'Sencha Touch'});
	store.sync();
	store.load();
	
	var names = [];
	store.each(function(recodes){
		names.push(recodes.get("name"));
	});
	alert(names.join("\n"));
});

浏览器代理：只保存在浏览器中，浏览器关闭数据销毁

/**
 * 浏览器代理
 */
Ext.onReady(function(){
	
	Ext.define("Person",{
		extend:"Ext.data.Model",
		fields:[
		   {name:"name",type:"string"}
		],
		proxy: {
	        type: 'sessionstorage',
	        id  : 'twitter-Searches'
	    }
	});
	
	var store = Ext.create('Ext.data.Store', {
	    model: "Person"
	});
	store.add({name: 'lyle2000w'});
	store.sync();
	store.load();
	
	var names = [];
	store.each(function(recodes){
		names.push(recodes.get("name"));
	});
	alert(names.join("\n"));
});

服务器代理：

ajax代理：

/**
 * ajax的异步代理
 */
Ext.onReady(function(){
	Ext.define("User",{
		extend:"Ext.data.Model",
		fields:[
		   {name:"name",type:"string"}
		]
	});
	
	var ajaxProxy = Ext.create("Ext.data.proxy.Ajax",{
		model:"User",
		url:"proxy.jsp",
		reader: 'json',
		limitParam:"myLimit"	//修改Ext.data.Operation的limit的名称
	});
	
	ajaxProxy.doRequest(Ext.create("Ext.data.Operation",{
		action:"create",
		limit:10,
		start:10
	}),function(result){
		Ext.Array.each(result.resultSet.records,function(item){
			alert(item.get("name"));
		});
	},this);
	
});

jsonP跨域代理（这里弄的不是很明白，原理）：

/**
 * 跨域代理
 */
Ext.onReady(function(){
	Ext.define("User",{
		extend:"Ext.data.Model",
		fields:[
		   {name:"name",type:"string"}
		],
		proxy:{
			type:"jsonp",
			url:"http://www.uspcat.com/extjs/person.php"
		}
	});
	
	var userMode = Ext.ModelManager.getModel("User");
	userMode.load(10,{
		success:function(record,option){
			alert(record.get("name"));
		}
	});
	
});

总结：

程序的走向基本上是建立model->使用proxy来对其操作进行代理，代理的作用包括远程访问数据构建出model模型，其中Ext.data.Operation可对代理进行配置，例如上limit参数等。->代理回调函数获取model的数据

使用的API:

Ext.ModelManager .getModel("User")（获取model）

Ext.data.Operation （代理配置参数）

Ext.data.proxy.Ajax （ajax代理）

Ext.data.Store    （model的集合类）

Ext.data.proxy.Memory （内存代理）