首页 > 代码库 > ExtJs4学习（七）数据代理Proxy

ExtJs4学习（七）数据代理Proxy

2024-08-09 19:09:26   219人阅读

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://www.mamicode.com/"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'));
});





ExtJs4学习（七）数据代理Proxy


联系
我们