03extjs的数据代理

day03
数据代理
proxy是进行数据读写的主要途径，通过代理操作数据进行CRUD
每一步操作会得到唯一的Ext.data.Operation实例，包含了所有的请求参数
数据代理proxy目录结构
Ext.data.proxy.Proxy 代理类的根类，分为client和server

Ext.data.proxy.Client 客户端代理
	Ext.data.proxy.Memory 普通的内存代理（重点）
	Ext.data.proxy.WebStorage 浏览器客户端存储代理
		Ext.data.proxy.SessionStorage 浏览器级别代理（重点）
		Ext.data.proxy.LocalStorage 本地化的级别代理（类似cookie不能跨

浏览器 重点）
Ext.data.proxy.Server 服务器端代理
	Ext.data.proxy.Ajax 异步加载的方式（重点）
		Ext.data.proxy.Rest 一种特殊的Ajax
	Ext.data.proxy.JsonP 跨域交互的代理（重点）跨域有严重的安全隐患，extjs

的跨域也需要服务器端做相应的配合
	Ext.data.proxy.Direct 命令
	3+方式的代理


1.Ext.data.proxy.Memory
(function(){
	Ext.onReady(function(){
		Ext.regModel("user",{//（模型类）
			fields:[
				{name:'name',type:'string'},
				{name:'age',type:'int'}	
			]
		});
		//不用create方法，直接用proxy来创建对象数据（数据）
		var userData = [
			{name:'cat',age:1},
			{name:'dog',age:26}
		];
		//创建model的代理类（代理，连接模型和数据）
		var memoryProxy = Ext.create("Ext.data.proxy.Memory",{
			data:userData,
			model:'user'
		});
		//接下来做CRUD
		memoryProxy.read(new Ext.data.Operation(),function(result){
			var datas = result.resultSet.records;//数组
			Ext.Array.each(datas,function(model){
				alert(model.get('name'));
			});
		});

		//update
		userData.push({name:'new cat.com',age:1});
		memoryProxy.update(new Ext.data.Operation({
			action:'update',
			data:userData
		}),function(result){},this);
	});
})();


2.Ext.data.proxy.LocalStorage 
(function(){
	Ext.onReady(function(){
		Ext.regModel("user",{
			fields:[
				{name:'name',type:'string'}
			],
			proxy:{
				type:'localstorage',
				id:'ts'//唯一全局变量
			}
		});

		//用store来初始化数据
		var store = new Ext.data.Store({
			model:'user'
		});
		store.add({name:'cat.com'});
		store.sync();
		store.load();
		var msg = [];
		store.each(function(rec){
			msg.push(rec.get('name'));
		});
		alert(msg.join("\n"));
	});
})();


3.Ext.data.proxy.SessionStorage
作此修改：proxy:{
				type:'sessionstorage',
				id:'ts'
			}
其他同上


4.Ext.data.proxy.Ajax//工作原理
(function(){
	Ext.onReady(function(){
		Ext.regModel("person",{
			fields:[
				{name:'name',type:'string'}	
			]
		});
		var ajaxProxy = new Ext.data.proxy.Ajax({
			url:'person.jsp',
			model:'person',
			reader:'json',
			limitParam:'indexLimit'
		});
		ajaxProxy.doRequest(new Ext.data.Operation({
			action:'read',
			limit:10,
			start:1,
			sorters:[
				new Ext.util.Storter({
					property:'name',
					direction:'ASC'
				})	
			]
		}),function(o){
			var text = o.response.responseText;
			alert(Ext.JSON.decode(text)['name']);
		});
	});
})();


5.Ext.data.proxy.JsonP//(跨域)
(function(){
	Ext.onReady(function(){
		Ext.regModel("person",{
			fields:[
				{name:'name',type:'string'}	
			],
			proxy:{
				type:'jsonp',
				url:'...php'//src的跨域来源
			}
		});
		var person = Ext.ModelManager.getModel('person');
		person.load(1,{
			scope:this,
			success：function(model){
				alert();
			}
		});
	});
})();
//此方法在html中写入<script type="text/javascript" src="jsonp.js"></script>脚

本标签
//src的来源不是本域，而是跨域的Ext.data.JsonP.callback1({name:'cat'})