Extjs4.0数据代理详解(proxy)详解

/**
 * Extjs4.0数据代理详解 数据代理Proxy是数据读写的主要途径，通过代理操作数据进行CRUD
 * 每一步操作都会得到唯一的Ext.data.Operation实例，他包含所有的请求参数
 * 1.数据代理proxy目录结构:
 * Ext.data.proxy.Proxy 代理类的根类（他分客户端代理和服务器端代理）
 *     Ext.data.proxy.Client 客户端代理
 *              Ext.data.proxy.Memory 普通的内存代理
 *              Ext.data.proxy.WebStorage 浏览器客户端存储代理
 *     Ext.data.proxy.SessionStorage 浏览器级别代理
 *     Ext.data.proxy.LocalStorage 本地化的级别代理（ 不能跨浏览器）
 *    Ext.data.proxy.Server 服务器端代理
 *             Ext.data.proxy.Ajax 异步加载方式
 *             Ext.data.proxy.Rest 一直特殊的ajax
 *             Ext.data.proxy.JsonP 跨域交互代理 :跨域交互严重的安全隐患的,Extjs跨域也需要服务器端的配合
 *             Ext.data.proxy.Direct命令
 *
 */
Ext.onReady(function() {
   Ext.regModel("user", {
      fields : [{
         name : 'name',
         type : 'string'
        }, {
         name : 'age',
         type : 'int'
        }]

     });
   // 不用create方法，直接用proxy创建对象数据
   var userData = [{
      name : 'www.baidu.com',
      age : 21
     }, {
      name : 'gougou.com',
      age : 22
     }];
   // 创建模型的代理类
   var memoryProxy = Ext.create("Ext.data.proxy.Memory", {
      data : userData,
      model : 'user'
     });
   // 可以crud
   /*userData.push({
      name :'soso.com',
      age : 32
     });
   // update 更新操作
   memoryProxy.update(new Ext.data.Operation({
        action :'update',
        data :userData
       }), function(result){},this);
*/
   // read读操作
   memoryProxy.read(new Ext.data.Operation(), function(result) {
      var datas = result.resultSet.records;
      Ext.Array.each(datas, function(model) {
         alert(model.get('name'));
        });
     });
  });

 

/**
 * jsonP使用
 */
Ext.onReady(function() {
   Ext.regModel("person", {
      fields : [{
         name : 'name',
         type : 'string'
        }],
      proxy : {
       type : 'jsonp',
       url : 'www.baidu.com'
      }
     });

   var person = Ext.ModelManager.getModel('person');
   person.load(1, {
      scope : this,
      success : function(model) {
       alert(model.get('name'));
      }
     });
  })

 

 

 

/**
 * Ext4.0 localStorage使用不能夸浏览器 但能存储上次加载的数据到浏览器中
 */

Ext.onReady(function() {
   Ext.regModel("user", {
      fields : [{
         name : 'name',
         type : 'string'
        }, {
         name : 'age',
         type : 'int'
        }],
      proxy : {
       type : 'localstorage',
       id : 'twitter-Searches'
      }
     });
   // 用store来初始化数据
   var store = new Ext.data.Store({
      model : user
     });
   store.add({
      name : 'www.baidu.com'
     });

   store.sync();// 异步加载
   store.load();
   var msg = [];
   store.each(function(rec) {
      msg.push(rec.get('name'));
     });
   alert(msg.join("\n"));
  })

 

/**
 * ajax代理模式
 */
Ext.onReady(function() {
   Ext.regModel("person", {
      fields : [{
         name : 'name',
         type : 'string'
        }]
     });
   var ajaxProxy = new Ext.data.proxy.Ajax({
      url : 'person.jsp',
      model : 'person',
      reader : 'json'
     });

   // doRequest 读取数据
   ajaxProxy.doRequest(new Ext.data.Operation({
        action : 'read',
        limit : 10,// 分页
        start : 1,
        sorters : [new Ext.util.Sorter({// 排序
         property : 'name',
         direction : 'ASC'
        })]
       }), function(o) {

      var text = o.response.responseText;
      // Ext.JSON.decode() Decodes (parses) a JSON string to
      // an object.
      alert(Ext.JSON.decode(text)['name']);
     });
  })

 

/**
 * sessionstorage:单浏览器模式
 */
Ext.onReady(function() {
   Ext.regModel("user", {
      fields : [{
         name : 'name',
         type : 'string'
        }],
      proxy : {
       type : 'sessionstorage',
       id : 'twiS'
      }
     });
     
     var store=new Ext.data.Store({
     model:user
     });
     store.add({name:'wangbass'});
     store.sync();
     store.load();
     var msg=[];
     store.each(function(rec){
     msg.push(rec.get('name'));
     });
   alert(msg.join("\n")); 
  })