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

深藏阁楼爱情的钟 2022-05-20 09:57 153阅读 0赞

转载：[https://blog.csdn.net/yubo\_725/article/details/45641553][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容器。

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>

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

![Center][]  
  
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类的数组，下面是浏览器中执行的结果：

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

[https_blog.csdn.net_yubo_725_article_details_45641553]: https://blog.csdn.net/yubo_725/article/details/45641553
[Center]: /images/20220520/4d88c7d834634230ad9c909a13ebb54c.png
[Center 1]: /images/20220520/edd5cbaa3c6045c78132cb8a9181de7b.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读