ExtJs4学习(七)数据代理Proxy
Ext数据代理我们介绍常用的五种
Ext.data.proxy.Ajax
AjaxProxy(Ajax数据代理类)是你的应用程序中使用最广泛的获取数据的方式. 它使用AJAX请求来从服务器获取数据, 然后通常将它们放入 Store中. 让我们来看一个典型的配置. 这里我们为一个Store设置一个AjaxProxy代理. 首先我们准备好一个 Model:
Ext.define('User', { extend: 'Ext.data.Model', fields: ['id', 'name', 'email'] });
然后我们一起看看ajax都有哪些配置和方法
//创建Ajax代理 var ajaxProxy = new Ext.data.proxy.Ajax( { url : 'data.json', model : 'User', /*reader : 'json',*/ reader : { type:"json" }, pageParam: 'pageNo',//可修改, 默认page limitParam : 'pageSize',//可修改, 默认limit actionMethods: { create : 'POST', read : 'POST', update : 'POST', destroy: 'POST' } }); ajaxProxy.doRequest( new Ext.data.Operation({ action : 'read',// 设置请求动作为read limit : 15, start : 0, sorters : [ new Ext.util.Sorter({ property : 'name', direction : 'ASC' })] }), function(obj){ var responseText = obj.response.responseText; alert(Ext.JSON.decode(responseText)['name']); // 获取原始响应数据 打印【{name:'somnus'}】 alert(responseText); // 获得记录总数 var totalRecords = obj.resultSet.totalRecords; alert('使用Ajax代理读取远程数据,记录总是:' + totalRecords); // 获得记录数组 var records = obj.resultSet.records; alert(records); } );
Ext.data.proxy.JsonP
JsonP代理用在当你想从你自己的应用服务器以外的域名加载数据时(跨域调用). 比如你的应用运行在http://domainA.com上, 那么就无法通过 Ajax从http://domainB.com加载数据, 因为浏览器不允许跨域的ajax请求.
而通过JsonP代理我们可以摆脱这个限制. 每当进行AJAX请求时, JsonP代理就在DOM中注入一个<script>
标签. 比如我们想从http://domainB.com/users 这个url下加载数据,
那么就会注入一个如下的script标签:
<script src="http://domainB.com/users?callback=someCallback"></script>在我们注入了上面这个标签后, 浏览器就会向这个url发送一个请求. 通过url中的callback, 我们通知domainB的服务器: 当结果返回时请调用 此回调函数并传入返回的数据. 只要服务器将响应结果组成如下格式, 调用就成功了:
Ext.regModel("User",{ fields:[ {name:'name',type:'string'} ], proxy:{ type:'jsonp',//跨域交互的代理 url:'http://www.uspcat.com/extjs/person.php' } }); var person = Ext.ModelManager.getModel('User'); person.load(1,{ scope:this, success:function(model){ alert(model.get('name')); } });
Ext.data.proxy.LocalStorage
LocalStorageProxy使用最新的HTML5本地数据库API, 将Model数据保存在本地客户端. HTML5本地数据库是一个 键值对存储(例如 不能存储像JSON这样的复杂对象), 因此LocalStorageProxy在保存和读取数据时, 自动进行序列化和反序列化.
本地数据库在保存用户个人信息时非常有用, 从而不再需要在服务端建立数据结构.
Ext.define('User', { fields: ['id', 'name'], extend: 'Ext.data.Model', proxy: { type: 'localstorage' } });
var store = new Ext.data.Store({ model:'User' }); store.add({name:'somnus'}); // 保存数据 store.sync(); // 读取数据 store.load(); store.each(function(record){ console.info(record.get('name')); });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。