转载:https://blog.csdn.net/yubo_725/article/details/45641553
今天学习了ExtJS的Proxy代理,理解Proxy代理用了一点时间,现在总算是有点眉目了,跟代理相关的几个东西有:Model、Store,我自己的理解是:Model就是数据类型的定义,类似于Java里定义一个Java bean,不过Model定义的是数据的字段,比如一个Person,包含name、age两个属性,为其定义Model的话,就是如下的方式:
G:我觉得model和store得关系有点像是java中得pojo类和存放类实例的容器,比如多个store相当于多个spring容器。
这里有点奇怪的是,在ExtJS5.1中,定义数据模型使用的是继承Ext.data.Model的方式,但是在低版本的ExtJS,比如ExtJS4.0中,定义数据模型的方式是通过Ext.regModel()方法来完成的,在ExtJS5.1中,使用Ext.regModel()方法是会报错的
Ext.define(‘Person’, { extend: ‘Ext.data.Model’, fields: [‘name’, ‘age’] });
说完了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的客户端代理和服务端代理有好多种,这里只使用到了其中的一种,后面还有很多需要学习的!!!