ExtJS5.1学习笔记10——Proxy代理的使用（客户端代理和服务端代理）
今天学习了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的客户端代理和服务端代理有好多种，这里只使用到了其中的一种，后面还有很多需要学习的！！！