Ext.data.proxy.Proxy

最新推荐文章于 2017-08-02 17:29:45 发布

info_

最新推荐文章于 2017-08-02 17:29:45 发布

阅读量755

点赞数

分类专栏： ext

本文链接：https://blog.csdn.net/info_/article/details/8609937

版权

ext 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

数据代理proxy是进行数据读写的主要途径,通过代理操作数据进行CRUD
每一步操作全会得到唯一的Ext.data.Operation实例他包含了所有的请求参数
1.数据代理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 本地化的级别代理(不能夸浏览器)----[重点]
   Ext.data.proxy.Server 服务器端代理
       Ext.data.proxy.Ajax 异步加载的方式----[重点]
           Ext.data.proxy.Rest 一种特使的Ajax--[知道]
       Ext.data.proxy.JsonP 跨域交互的代理----[重点] 跨域是有严重的安全隐患的 extjs的跨域也是需要服务器端坐相应的配合
       Ext.data.proxy.Direct 命令.
       3+方式的代理
资料
REST指Representational State Transfer (有时写作"ReST")，表
示性状态转移，其要求无状态、客户端-服务器、具有缓存机制的通信协议——实际上是使用HTTP协议。
RESTful应用使用HTTP请求来POST数据（创建和/或更新）、读取数据（例如，进行查询）、删除数据。

这样，REST使用HTTP来进行CRUD（Create/Read/Update/Delete）操作

.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>EXTJS4.0</title>
<link rel="stylesheet" type="text/css" href="../../../../extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="../../../../extjs4/bootstrap.js"></script>
<script type="text/javascript" src="../../../../extjs4/locale/ext-lang-zh_CN.js"></script>
<!--<script type="text/javascript" src="memory.js"></script>-->
<!--<script type="text/javascript" src="localstorage.js"></script>-->
<!--<script type="text/javascript" src="sessionstorage.js"></script>-->
<!--<script type="text/javascript" src="ajax.js"></script>-->
<script type="text/javascript" src="jsonp.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>

memory.js

(function(){
	Ext.onReady(function(){
		Ext.regModel("user",{
			fields:[
				{name:'name',type:'string'},
				{anme:'age',type:'int'}
			]
		});
		//不用create方法 我们直接用proxy来创建对象数据
		var userData = [
			{name:'uspcat.com',age:1},
			{name:'yunfengcheng',age:26}
		];
		//创建model的代理类
		var memoryProxy = Ext.create("Ext.data.proxy.Memory",{
			data:userData,
			model:'user'
		})
		
		userData.push({name:'new uspcat.com',age:1});
		//update
		memoryProxy.update(new Ext.data.Operation({
			action:'update',
			data:userData
		}),function(result){},this);
		
		//就可以做CRUD了
		memoryProxy.read(new Ext.data.Operation(),function(result){
			var datas = result.resultSet.records;
			Ext.Array.each(datas,function(model){
				alert(model.get('name'));
			})
		});
	});
})();

localstorage.js

(function(){
	Ext.onReady(function(){
		Ext.regModel("user",{
			fields:[
				{name:'name',type:'string'}
			],
			proxy:{
				type:'localstorage',
				id  : 'twitter-Searches'
			}
		});
		//我们用store来初始化数据
		var store = new Ext.data.Store({
			model:user
		});
		store.add({name:'uspcat.com'});
		store.sync();
		store.load();
		var msg = [];
		store.each(function(rec){
			msg.push(rec.get('name'));
		});
		alert(msg.join("\n"));
	})
})();

sessionstorage.js

(function(){
	Ext.onReady(function(){
		Ext.regModel("user",{
			fields:[
				{name:'name',type:'string'}
			],
			proxy:{
				type:'sessionstorage',
				id  : 'twitter-Searches'
			}
		});
		//我们用store来初始化数据
		var store = new Ext.data.Store({
			model:user
		});
		store.add({name:'yunfengcheng'});
		store.sync();
		store.load();
		var msg = [];
		store.each(function(rec){
			msg.push(rec.get('name'));
		});
		alert(msg.join("\n"));
	})
})();

ajax.js

(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.Sorter({
						property:'name',
						direction:'ASC'
					})
				]
			}),function(o){
			var text = o.response.responseText;
			alert(Ext.JSON.decode(text)['name']);
		});
	});
})();

jsonp.js

(function(){
	Ext.onReady(function(){
		Ext.regModel("person",{
			fields:[
				{name:'name',type:'string'}
			],
			proxy:{
				type:'jsonp',
				url:'http://www.uspcat.com/extjs/person.php'
			}
		});
		var person = Ext.ModelManager.getModel('person');
		person.load(1,{
			scope:this,
			success:function(model){
				alert(model.get('name'));
			}
		});
	})
})();

person.jsp

<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%
	response.getWriter().write("{name:'uspcat.com'}");
%>

info_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext.data.proxy.Proxy

数据代理proxy是进行数据读写的主要途径,通过代理操作数据进行CRUD每一步操作全会得到唯一的Ext.data.Operation实例他包含了所有的请求参数1.数据代理proxy目录结构Ext.data.proxy.Proxy 代理类的根类(他分为客户端(Client)代理和服务器代理(Server)) Ext.data.proxy.Client 客户端代理
复制链接

扫一扫

专栏目录