ExtJS4-客户端代理

Dear 丶 2022-09-23 10:53 186阅读 0赞

代理（proxy）是用来加载和存取Model 数据的。在开发过程中，我们一般不会直接操作代理，它会很好的配合Store 完成工作，所以在本节内容中，我们主要讲解各种proxy的用法。

代理（proxy）分为两大类：客户端代理和服务器端代理。客户端代理主要完成与浏览器本地存取数据相关的工作，服务器端代理则是通过发送请求，从服务器端获取数据。根据各自获取数据的方式，客户端代理和服务器端代理又可以分为一下几种：

客户端代理：

*  LocalStorageProxy：将数据存储在localStorage中，此种方式可以持久的将数据存储在客户端。
 *  SessionStorageProxy：将数据存储在sessionStorage中，此种方式只在当前会话中生效，当关闭浏览器以后，数据也会随之丢失。
 *  MemoryProxy：将数据存储在内存中，此种方式只在当前页面有效，且如果刷新页面，数据将丢失。

服务器端代理：

*  Ajax：在当前域中发送请求
 *  JsonP：跨域的请求
 *  Rest：与服务器进行RESTful（GET/PUT/POST/DELETE）交互
 *  Direct：使用  Ext.direct.Manager 发送请求
 *  ## LocalStorageProxy ##
    
    要使用代理，我们首先要有一个数据模型类，我们定义一个简单的Person类：
    
        Ext.define('Person', {
            extend: 'Ext.data.Model',
            fields: ['name', 'age']
        });
    
    有了Model，我们还需要一个Store。我们可以把 Store 理解为数据仓库，它对应数据库中的表，而Store 包含的 Record 则是数据表中的每一行记录。我们同样简单的创建一个Store对象：
    
        var personStore = Ext.create("Ext.data.Store", {
            model: 'Person'
        });
    
    接下来就到我们代理出场的时候了。我们需要创建一个LocalStorageProxy：
    
        var personProxy = new Ext.data.proxy.LocalStorage({
            id: 'Person_LocalStorage',
            model: 'Person'
        });
    
    有了代理，我们需要将代理和Store联系起来：
    
        personStore.setProxy(personProxy);
    
    其实，在我们实际应用中，可以在Model 或 Store 中直接使用proxy 选项，我们在后面的示例中将会看到具体的用法。
    
    有了Store 和 Proxy，我们先保存一条数据到LocalStorage中：
    
        personStore.add({ name: 'www.qeefee.com', age: 1 });
        personStore.add({ name: 'qf', age: 26 });
        personStore.add({ name: 'qifei', age: 26 });
        personStore.sync();
    
    要查看保存的数据，我们需要先将数据从LocalStorage中加载到Store中，然后对Store 进行遍历：
    
        personStore.load();
        var msg = [];
        personStore.each(function (person) {
            msg.push(person.get('name') + ' ' + person.get('age'));
        });
        
        Ext.MessageBox.alert('提示', msg.join('<br />'));
    
    我们可以看到这样的提示：
    
    [![image][]][image 1]
    
    使用load方法会将所有的数据都加载到Store中，如果我们需要进行查询指定的数据，就要用到filter方法了。
    
        personStore.filter("name", /\.com$/);
    
    我们使用这个filter过滤以.com结尾的name字段，最后得到的结果：
    
    [![image][image 2]][image_image 2]
    
    另外，我们还可以使用多个过滤条件：
    
        personStore.filter([
            { property: "name", value: /\.com$/ },
            { filterFn: function (item) { return item.get("age") > 10; } }
        ]);
    
    这两个过滤条件是“and”的关系，所以我们目前没有符合的数据。
    
    注意第二个过滤条件，它传入的是一个方法，这种方式可以方便我们自定义过滤条件，如果我们的业务需求比较复杂，我们可以使用过滤方法替代这些过滤条件：
    
        personStore.filter(function (item) {
            return item.get("age") > 10 && item.get('name').length > 3;
        });
    
    这里我们过滤age大于10，且名字长度大于3的数据，得到的结果如下：
    
    [![image][image 3]][image_image 3]
    
    更新操作：
    
        //得到第一个person对象
        var person = personStore.first();
        //修改名字字段
        person.set('name', 'qeefee.com');
        //保存到本地
        personStore.sync();
    
    删除操作：
    
        //得到第一个person对象
        var person = personStore.first();
        //移除
        personStore.remove(person);
        //保存
        personStore.sync();
    
     
    
    ## SessionStorageProxy ##
    
    SessionStorageProxy 的用法与LocalStorageProxy 的用法基本一致，我们这次在Model中添加proxy 的配置项：
    
        //定义数据模型
        Ext.define('Person', {
            extend: 'Ext.data.Model',
            fields: ['name', 'age'],
            proxy: {
                type: 'sessionstorage',
                id: 'myProxyKey'
            }
        });
    
    在Model中加入代理配置以后，我们就不需要单独的定义代理对象了，可以直接使用Store来对其进行操作：
    
        //定义Store
        var personStore = Ext.create("Ext.data.Store", {
            model: 'Person'
        });
        
        //添加数据
        personStore.add({ name: 'www.qeefee.com', age: 1 });
        personStore.add({ name: 'qf', age: 26 });
        personStore.add({ name: 'qifei', age: 26 });
        personStore.sync();
        
        //读取数据
        personStore.load();
        var msg = [];
        personStore.each(function (person) {
            msg.push(person.get('name') + ' ' + person.get('age'));
        });
        Ext.MessageBox.alert('提示', msg.join('<br />'));
    
     
    
    ## MemoryProxy ##
    
    MemoryProxy 是将数据存储在内存中的，它只在当前页生效，如果关闭或刷新页面，所有数据都将丢失。在使用MemoryProxy 的时候，我们需要为Store指定一个数据集（类似于缓存），store 将通过代理对这个数据集进行操作：
    
        //定义数据模型
        Ext.define('Person', {
            extend: 'Ext.data.Model',
            fields: ['name', 'age']
        });
        var data = { Users: [ { name: 'www.qeefee.com', age: 1 }, { name: 'qeefee', age: 1 } ] }
        //定义Store
        var personStore = Ext.create("Ext.data.Store", {
            model: 'Person',
            data: data.Users,
            proxy: {
                type: 'memory'
            }
        });
    
    在代码中高亮显示的部分，就是为store设置的缓存。当personStore 定义的时候，它就会自动的将数据加载到Store中，所以在我们访问数据的时候不需要再调用load方法了：
    
        //读取数据
        var msg = [];
        personStore.each(function (person) {
            msg.push(person.get('name') + ' ' + person.get('age'));
        });
        Ext.MessageBox.alert('提示', msg.join('<br />'));
    
    和上两个的操作基本一致，我们可以通过下面的代码添加一行新数据：
    
        personStore.add({ name: 'qifei', age: 26 });
        personStore.sync();
    
    本节内容主要介绍了浏览器端代理的用法，在下节内容中，我将介绍如何使用服务器端代理进行数据的操作。

[image]: http://www.qeefee.com/Media/Default/Windows-Live-Writer/56004d2b955b_8D77/image_thumb_1.png
[image 1]: http://www.qeefee.com/Media/Default/Windows-Live-Writer/56004d2b955b_8D77/image_4.png
[image 2]: http://www.qeefee.com/Media/Default/Windows-Live-Writer/56004d2b955b_8D77/image_thumb_2.png
[image_image 2]: http://www.qeefee.com/Media/Default/Windows-Live-Writer/56004d2b955b_8D77/image_6.png
[image 3]: http://www.qeefee.com/Media/Default/Windows-Live-Writer/56004d2b955b_8D77/image_thumb_3.png
[image_image 3]: http://www.qeefee.com/Media/Default/Windows-Live-Writer/56004d2b955b_8D77/image_8.png