数据代理proxy是进行数据读写的主要途径，通过代理操作数据进行CRUD

每一步操作都会得到唯一的Ext.data.Operation实例，它包含了所有的请求参数
1.数据代理proxy目录结构
Ext.data.proxy.Proxy 代理类的根类(它分为客户端(Client)代理和服务器代理(Server))
     Ext.data.proxy.Client 客户端代理
          Ext.data.proxy.Memory  普通的内存代理
          Ext.data.proxy.WebStorage 浏览器客户端存储代理
               Ext.data.proxy.SessionStorage  浏览器级别代理(session)
               Ext.data.proxy.LocalStorage 本地化级别代理(等同于cookies)
     Ext.data.proxy.Server 服务器端代理
         Ext.data.proxy.Ajax 异步加载的方式
              Ext.data.proxy.Rest  一种特殊的Ajax
         Ext.data.proxy.JsonP  跨域交互的代理   跨域是有严重的安全隐患的,extjs的跨域也是需要服务器端做相应的配合
         Ext.data.proxy.Direct 命令
         3+方式的代理
资料
REST指Representational State Transfer(有时写作"ReST"),表示状态转移，其要求无状态、客户端-服务器、具有缓存机制的通信协议——实际上是使用HTTP协议。
RESTful应用使用HTTP请求来POST数据(创建和/或更新)、读取数据(例如，进行查询)、删除数据。
这样，REST使用HTTP来进行CRUD(Create/Read/Update/Delete)操作
lesson4.html 
   
   
   
   
    
    
    
    
    
  1. > 
    2. 
    
    
    
    
  2. <html> 
    3. 
    
    
    
    
  3. <head> 
    4. 
    
    
    
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    5. 
    
    
    
    
  5. <title>proxytitle> 
    6. 
    
    
    
    
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
    7. 
    
    
    
    
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js">script> 
    8. 
    
    
    
    
  8. <script type="text/javascript" src="jsonp.js">script> 
    9. 
    
    
    
    
  9. head> 
    10. 
    
    
    
    
  10. <body> 
    11. 
    
    
    
    
  11. body> 
    12. 
    
    
    
    
  12. html> 
    13.
---------------------------------------------------------------------------------------
memory.js 
   
   
   
   
    
    
    
    
    
  1. (function(){ 
    2. 
    
    
    
    
  2.    Ext.onReady(function(){    
    3. 
    
    
    
    
  3.        Ext.define("user",{ 
    4. 
    
    
    
    
  4.         extend:'Ext.data.Model', 
    5. 
    
    
    
    
  5.         fields:[ 
    6. 
    
    
    
    
  6.             {name:'name',type:'string'}, 
    7. 
    
    
    
    
  7.             {name:'age',type:'int'} 
    8. 
    
    
    
    
  8.         ] 
    9. 
    
    
    
    
  9.       }); 
    10. 
    
    
    
    
  10.      //不用create方法，我们直接用proxy来创建对象数据 
    11. 
    
    
    
    
  11.      var userData = [ 
    12. 
    
    
    
    
  12.        {name:'uspcat.com',age:1}, 
    13. 
    
    
    
    
  13.        {name:'yunfengcheng',age:26} 
    14. 
    
    
    
    
  14.      ]; 
    15. 
    
    
    
    
  15.      var memoryProxy = Ext.create("Ext.data.proxy.Memory",{ 
    16. 
    
    
    
    
  16.         data:userData, 
    17. 
    
    
    
    
  17.         model:'user' 
    18. 
    
    
    
    
  18.      }); 
    19. 
    
    
    
    
  19.       
    20. 
    
    
    
    
  20.     userData.push({name:'new upcast.com',age:1}); 
    21. 
    
    
    
    
  21.       
    22. 
    
    
    
    
  22.      //update 
    23. 
    
    
    
    
  23.      /*在这个版本上根本就不能用 
    24. 
    
    
    
    
  24.       *下面的代码虽然没有错误，但是没有实际用处 
    25. 
    
    
    
    
  25.      */ 
    26. 
    
    
    
    
  26.      var operation = new Ext.data.Operation({action:'update'}); 
    27. 
    
    
    
    
  27.      operation.resultSet={ records:[Ext.create('user',{name:'name',age:2})]}; 
    28. 
    
    
    
    
  28.      memoryProxy.update(operation,function(result){},this); 
    29. 
    
    
    
    
  29.       
    30. 
    
    
    
    
  30.      //就可以做CRUD了 
    31. 
    
    
    
    
  31.      memoryProxy.read(new Ext.data.Operation(),function(result){ 
    32. 
    
    
    
    
  32.             console.log(result); 
    33. 
    
    
    
    
  33.             //得到user这个模型的两个对象 
    34. 
    
    
    
    
  34.             var datas = result.resultSet.records; 
    35. 
    
    
    
    
  35.             Ext.Array.each(datas,function(model){ 
    36. 
    
    
    
    
  36.                 console.log(model.get('name')); 
    37. 
    
    
    
    
  37.             }); 
    38. 
    
    
    
    
  38.      }); 
    39. 
    
    
    
    
  39.    });   
    40. 
    
    
    
    
  40. })(); 
    41.
--------------------------------------------------------------------------------
localstorage相当于cookies，关闭浏览器之后还是可以读到的
localstorage.js 
   
   
   
   
    
    
    
    
    
  1. (function(){ 
    2. 
    
    
    
    
  2.     Ext.onReady(function(){ 
    3. 
    
    
    
    
  3.         Ext.regModel("user",{ 
    4. 
    
    
    
    
  4.             fields:[ 
    5. 
    
    
    
    
  5.                 {name:'name',type:'string'}  
    6. 
    
    
    
    
  6.             ], 
    7. 
    
    
    
    
  7.             proxy:{ 
    8. 
    
    
    
    
  8.                 type:'localstorage', 
    9. 
    
    
    
    
  9.                 id:'twitter-Searches' 
    10. 
    
    
    
    
  10.             }    
    11. 
    
    
    
    
  11.         }); 
    12. 
    
    
    
    
  12.         //我们用store来初始化数据 
    13. 
    
    
    
    
  13.         var store = new Ext.data.Store({ 
    14. 
    
    
    
    
  14.             model:user   
    15. 
    
    
    
    
  15.         }); 
    16. 
    
    
    
    
  16.         store.add({name:'uspcat.com'}); 
    17. 
    
    
    
    
  17.         store.sync(); 
    18. 
    
    
    
    
  18.         store.load(); 
    19. 
    
    
    
    
  19.         var msg = []; 
    20. 
    
    
    
    
  20.         store.each(function(rec){ 
    21. 
    
    
    
    
  21.             msg.push(rec.get('name')); 
    22. 
    
    
    
    
  22.         }); 
    23. 
    
    
    
    
  23.         console.log(msg.join("\n")); 
    24. 
    
    
    
    
  24.     });  
    25. 
    
    
    
    
  25. })(); 
    26.
------------------------------------------------------------------------------------
sessionstorage相当于session，关闭浏览器之后一切都要从头开始
sessionstorage.js 
   
   
   
   
    
    
    
    
    
  1. (function(){ 
    2. 
    
    
    
    
  2.     Ext.onReady(function(){ 
    3. 
    
    
    
    
  3.         Ext.regModel("user",{ 
    4. 
    
    
    
    
  4.             fields:[ 
    5. 
    
    
    
    
  5.                 {name:'name',type:'string'}  
    6. 
    
    
    
    
  6.             ], 
    7. 
    
    
    
    
  7.             proxy:{ 
    8. 
    
    
    
    
  8.                 type:'sessionstorage', 
    9. 
    
    
    
    
  9.                 id:'twitter-Searches' 
    10. 
    
    
    
    
  10.             }    
    11. 
    
    
    
    
  11.         }); 
    12. 
    
    
    
    
  12.         //我们用store来初始化数据 
    13. 
    
    
    
    
  13.         var store = new Ext.data.Store({ 
    14. 
    
    
    
    
  14.             model:user   
    15. 
    
    
    
    
  15.         }); 
    16. 
    
    
    
    
  16.         store.add({name:'new uspcat.com'}); 
    17. 
    
    
    
    
  17.         store.sync(); 
    18. 
    
    
    
    
  18.         store.load(); 
    19. 
    
    
    
    
  19.         var msg = []; 
    20. 
    
    
    
    
  20.         store.each(function(rec){ 
    21. 
    
    
    
    
  21.             msg.push(rec.get('name')); 
    22. 
    
    
    
    
  22.         }); 
    23. 
    
    
    
    
  23.         console.log(msg.join("\n")); 
    24. 
    
    
    
    
  24.     });  
    25. 
    
    
    
    
  25. })(); 
    26.
-------------------------------------------------------------------------------------
ajax.js 
   
   
   
   
    
    
    
    
    
  1. (function(){ 
    2. 
    
    
    
    
  2.     Ext.onReady(function(){ 
    3. 
    
    
    
    
  3.             Ext.define('User', { 
    4. 
    
    
    
    
  4.               extend: 'Ext.data.Model', 
    5. 
    
    
    
    
  5.               fields: [ 
    6. 
    
    
    
    
  6.                   {name: 'name',  type: 'string'} 
    7. 
    
    
    
    
  7.               ] 
    8. 
    
    
    
    
  8.             });  
    9. 
    
    
    
    
  9.             var ajaxProxy = new Ext.data.proxy.Ajax({ 
    10. 
    
    
    
    
  10.                  url:'person.jsp', 
    11. 
    
    
    
    
  11.                  model:User, 
    12. 
    
    
    
    
  12.                  reader:'json', 
    13. 
    
    
    
    
  13.                  limitParam:'indexLimit' 
    14. 
    
    
    
    
  14.             }); 
    15. 
    
    
    
    
  15.       ajaxProxy.doRequest(new Ext.data.Operation({ 
    16. 
    
    
    
    
  16.         action:'read', 
    17. 
    
    
    
    
  17.         limit:10, 
    18. 
    
    
    
    
  18.         start:1, 
    19. 
    
    
    
    
  19.         sorters:[ 
    20. 
    
    
    
    
  20.           new Ext.util.Sorter({ 
    21. 
    
    
    
    
  21.               property:'name', 
    22. 
    
    
    
    
  22.                 direction:'ASC'  
    23. 
    
    
    
    
  23.           }) 
    24. 
    
    
    
    
  24.  
    25. 
    
    
    
    
  25.         ]    
    26. 
    
    
    
    
  26.       }),function(o){ 
    27. 
    
    
    
    
  27.          console.log(o); 
    28. 
    
    
    
    
  28.          var text = o.response.responseText; 
    29. 
    
    
    
    
  29.          console.log(Ext.JSON.decode(text)['name']); 
    30. 
    
    
    
    
  30.       }); 
    31. 
    
    
    
    
  31.     });  
    32. 
    
    
    
    
  32. })(); 
    33.
person.js
  
   
   
   
   
    
    
    
    
    
  1. <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
    2. 
    
    
    
    
  2. <% 
    3. 
    
    
    
    
  3.    System.out.println(request.getParameter("id")); 
    4. 
    
    
    
    
  4.    response.getWriter().write("{name:'upcat.com'}"); 
    5. 
    
    
    
    
  5. %> 
    6.
---------------------------------------------------------------------------------
 
jsonp.js 
   
   
   
   
    
    
    
    
    
  1. (function(){ 
    2. 
    
    
    
    
  2.             Ext.define('person', { 
    3. 
    
    
    
    
  3.               extend: 'Ext.data.Model', 
    4. 
    
    
    
    
  4.               fields: [ 
    5. 
    
    
    
    
  5.                   {name: 'name',  type: 'string'} 
    6. 
    
    
    
    
  6.               ], 
    7. 
    
    
    
    
  7.               proxy:{ 
    8. 
    
    
    
    
  8.                 type:'jsonp', 
    9. 
    
    
    
    
  9.                 url:'http://www.uspcat.com/extjs/person.php'     
    10. 
    
    
    
    
  10.               } 
    11. 
    
    
    
    
  11.             });  
    12. 
    
    
    
    
  12.             var person = Ext.ModelManager.getModel('person'); 
    13. 
    
    
    
    
  13.             person.load(1,{ 
    14. 
    
    
    
    
  14.                 scope:this, 
    15. 
    
    
    
    
  15.                 success:function(model){ 
    16. 
    
    
    
    
  16.                     console.log(model.get('name')); 
    17. 
    
    
    
    
  17.                 } 
    18. 
    
    
    
    
  18.             }); 
    19. 
    
    
    
    
  19.  
    20. 
    
    
    
    
  20. })(); 
    21.
控制台的输出结果是：
uspcat
===============================================
跨域访问机制：
在服务器上，同一个域中的文件,数据或者swf可以任意访问。若要跨域访问需被授权。注意不同域名即使映射到相同IP地址也会被看成两个域。IP地址名和通过解析的地址也被看作两个域。