ExtJS 数据处理-Proxy（代理）

更新记录
2022年7月22日 发布。
2022年7月16日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

Ext.data.Proxy（代理）

代理说明

模型和存储使用代理来处理模型数据的加载和保存
数据存储(Store)和模型(Model)使用代理加载和保存数据
代理使用reader和writer进行数据的读取和写入
读取器（Reader）类型有：Array、JSON、XML三种
写入器（Writer）类型有：JSON、XML

使用proxy属性即可定义代理
指定URL：使用代理可以指定读取数据时调用的URL
指定格式：还可以告诉读取器数据的格式以及它是JSON还是XML

代理的类型

有两种类型的代理：客户(Client)端代理 和 服务器代理(Servr)
代理可以直接在model的schema中定义，也可以在store中定义

客户端代理（client-side proxy）
客户端代理用于处理从客户端本身加载和保存的数据
客户端代理包括 内存(Memory) 和 本地存储(LocalStorage、SessionStorage) 两种
内存代理用于内存中的局部变量数据
本地存储使用HTML5 Local Storage特性
注意：部分旧浏览器不支持html5本地存储

服务器代理（server-side proxy）
服务器端代理与服务器通信以读取和保存数据
此类代理的包括AJAX、JSONP和REST、Direct
Ajax：用于发送异步HTTP请求
JSONP（带填充的JSON）：当需要向另一个域发送请求时，这非常有用
Ajax只能用于向同一个域发送请求
REST：使用RESTful向服务器发送Ajax请求HTTP动词，如GET、POST、PUT和DELETE
Direct：使用Ext.Direct与服务器通信

定义代理

实例：客户端内存代理

//测试用的数据，实际应用中可以是用户输入等等
var data = {
    data: [{
        firstName: 'Shiva',
        lastName: 'Kumar',
        gender: 'Male',
        fulltime: true,
        phoneNumber: '123-456-7890'
    }, {
        firstName: 'Vishwa',
        lastName: 'Anand',
        gender: 'Male',
        fulltime: true,
        phoneNumber: '123-456-7890'
    }]
};

//定义Store
var myStore = Ext.create('Ext.data.Store', {
    model: 'Employee',
    //指定数据
    data: data,
    proxy: {
        //指定内存数据
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'Employee'
        }
    }
});

实例：客户端LocalStorage代理

实质是使用浏览器的本地存储(LocalStorage)
LocalStorage是一个键-值对存储，许多旧的浏览器不支持它

var myStore = Ext.create('Ext.data.Store', {
    model: 'Benefits',
    autoLoad: true,
    proxy: {
        type: 'localstorage',
        id: 'benefits'
    }
});

实例：客户端SessionStorage代理

实质是使用浏览器的本地存储(SessionStorage)
这是一个HTML5特性，仅在最新的浏览器中受支持
当会话过期时，存储在SessionStorage中的数据将被销毁

var myStore = Ext.create('Ext.data.Store', {
    model: 'Benefits',
    autoLoad: true,
    proxy: {
        type: 'localstorage',
        id: 'benefits'
    }
});

实例：服务器端jsonp代理

var myStore = Ext.create('Ext.data.Store', {
    model: 'Products',
    proxy: {
        type: 'jsonp',
        url: 'http://domain.com/products',
        callbackKey: 'productsCallback'
    }
});

实例：服务器端REST代理

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   proxy : {
      type : 'rest',
      actionMethods : {
         read : 'POST'  // Get or Post type based on requirement
      },
// here we have to include the rest URL path 
      url : 'restUrlPathOrJsonFilePath', 
    // which fetches data from database or Json file path where the data is stored
      reader: {
         type : 'json',  // the type of data which is fetched is of JSON type
         root : 'data'
      },
   }
});