ExtJS5.1学习笔记10——Proxy代理的使用（客户端代理和服务端代理）

最新推荐文章于 2022-07-11 10:26:32 发布

yubo_725

最新推荐文章于 2022-07-11 10:26:32 发布

阅读量3.1k

点赞数 1

分类专栏： ExtJS 文章标签： Ext js ajax Proxy 代理

本文链接：https://blog.csdn.net/yubo_725/article/details/45641553

版权

ExtJS 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

今天学习了ExtJS的Proxy代理，理解Proxy代理用了一点时间，现在总算是有点眉目了，跟代理相关的几个东西有：Model、Store，我自己的理解是：Model就是数据类型的定义，类似于Java里定义一个Java bean，不过Model定义的是数据的字段，比如一个Person，包含name、age两个属性，为其定义Model的话，就是如下的方式：

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: ['name', 'age']
});

这里有点奇怪的是，在ExtJS5.1中，定义数据模型使用的是继承Ext.data.Model的方式，但是在低版本的ExtJS，比如ExtJS4.0中，定义数据模型的方式是通过Ext.regModel()方法来完成的，在ExtJS5.1中，使用Ext.regModel()方法是会报错的

说完了Model，再是Store，我所理解的Store就是一个存储数据的结构，前面定义了Person这个数据模型，Store里就可以存储这种类型的数据了，除了可以在新建Store的时候指定Store中存储的数据，还可以使用Proxy代理来为Store指定存储的数据，这就是Proxy的作用了，专门为Store做代理，Store中存储的数据都由代理Proxy说了算。

Ext中的Proxy分为客户端代理和服务端代理，下面用一些代码来说明这两种代理：

1、客户端代理，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 下面是三个必须引入的文件 -->
		<link rel="stylesheet" type="text/css" href="../../build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
		<script src="../../build/ext-all.js"></script>
		<script src="../../build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

		<script type="text/javascript">
			Ext.onReady(function () {
				//定义一个Person数据模型，包含name和age两个属性
			    Ext.define('Person', {
			        extend: 'Ext.data.Model',
			        fields: ['name', 'age']
			    });
			    
			    //定义一个store，存储的数据类型为Person类型
			    var store = new Ext.data.Store({
			    	model: 'Person'
			    });

			    //定义一个客户端数据代理，为内存代理，代理的数据类型为Person类型，其中包含了一条数据
			    var proxy = new Ext.data.proxy.Memory({
			    	model: 'Person',
			    	data: {
			    		name: 'zhangsan',
			    		age: 20
			    	}
			    });

			    //为store设置代理
			    store.setProxy(proxy);

			    //store加载数据，并设置回调函数，加载完成后显示store中的数据吗
			    store.load(function(records, operation, success){
			    	if(success){
			    		var msg = [];
			    		store.each(function(person){
			    			msg.push('name = ' + person.get('name') + ', age = ' + person.get('age'));
			    		});
			    		Ext.Msg.alert('msg', msg);
			    	}
			    });

			});
		</script>
	</head>
	<body>
		<div id="form"></div>
	</body>
</html>

上面的代码在浏览器中执行结果如下：

2、服务端代理，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 下面是三个必须引入的文件 -->
		<link rel="stylesheet" type="text/css" href="../../build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
		<script src="../../build/ext-all.js"></script>
		<script src="../../build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

		<script type="text/javascript">
			Ext.onReady(function () {
				//定义数据模型
			    Ext.define('Person', {
			        extend: 'Ext.data.Model',
			        fields: ['name', 'age']
			    });
			    //定义Person模型的Store，使用ajax代理，数据从personData.php页面而来，使用json数据类型，从users节点开始读数据
			    var store = Ext.create('Ext.data.Store', {
			        model: 'Person',
			        proxy: {
			            type: 'ajax',
			            url: 'personData.php',
			            reader: {
			                type: 'json',
			                root: 'users'
			            }
			        }
			    });
			    //加载数据，在回调函数中遍历Store中存储的数据
			    store.load(function(records, operation, success){
			    	if(success){
			    		var msg = [];
					    store.each(function (person) {
					        msg.push(person.get('name') + ' ' + person.get('age'));
					    });

					    Ext.MessageBox.alert('提示', msg.join('<br />'));
					}
			    });

			});

		</script>
	</head>
	<body>
		<div id="form"></div>
	</body>
</html>

由于使用了Ajax代理，从personData.php页面取的数据，所以这里还有一个personData.php页面，代码如下：

<?php
	echo "{
		users: [{
			name: 'zhangsan',
			age: 20
		}, {
			name: 'lisi',
			age: 19
		}]
	}";
?>

personData.php页面只是简单地返回了一个Person类的数组，下面是浏览器中执行的结果：

关于Ext的客户端代理和服务端代理有好多种，这里只使用到了其中的一种，后面还有很多需要学习的！！！

yubo_725

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录