Sencha Touch 数据层篇 Proxy(下)

代理：Proxy与数据存取

代理用于处理数据的存取操作，我们通过给store配置代理，来使得store能够访问服务端以及客户端的数据。换句话说，proxy指定了store的数据源。

代理共分为两大类：客户端代理和服务端代理。客户端代理负责本机数据的存取，而服务端代理，则负责远程数据的存取。下面，从比较简单客户端代理开始讲解。

客户端代理

客户端代理又分为内存代理和web存储代理，内存代理很容易理解，就是负责存取内存中的数据。例如我们随手在代码中写出来的一个javascript对象，就可以用内存代理读取。而web存储代理，其实是对HTML5的Web Storage所作的封装。

内存代理(type: 'memory')

内存代理的使用最为简易，内存代理用来读取在内存中的对象，只要将数据对象配置给store即可。也可以调用store的setData()方法来完成这一操作。以下是采用配置的方式，将数据对象配置给store的例子。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

//我们要读取的数据 var data = {      users: [{          name: 'Ed Spencer' ,          phone: '555 1234'      }, {          name: 'Abe Elias' ,          phone: '666 1234'      }] }; var store = Ext.create( 'Ext.data.Store' , {      autoLoad: true ,      model: 'User' ,      data: data, //数据直接给了data配置项。      proxy: {          type: 'memory' ,          reader: {              type: 'json' ,              root: 'users'          }      } });

上面的proxy配置项也可以略去，这样同样能够正常读取数据。

1 2 3 4

var store = Ext.create( 'Ext.data.Store' , {      model: 'User' ,      data: data });

本地存储代理(type: 'localstorage')

前面提到，使用web存储代理，本质是对HTML5 WebStorage数据的操作。原生HTML5 WebStorage的使用方式简单得令人诧异。我们使用web存储，只需要认识localStorage和sessionStorage这两个浏览器内置的对象就行。这两个对象都有setItem(key,value)、removeItem(key)、getItem(key)、clear()、key(index)方法。直接调用就像这样：

1	localStorage.setItem(key,value);

换一个更简洁的写法：

1	localStorage.key = value;

在ST中，使用WebStorage代理，只要配置个Id作为主键就行了。更新完store的数据后，要记得调用sync方法，才能将数据保存至浏览器的本地存储中。以下是完整的例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

Ext.define( 'Search' , {      fields: [ 'id' , 'query' ],      extend: 'Ext.data.Model' }); var store = Ext.create( 'Ext.data.Store' , {      model: "Search" ,      proxy: {          type: 'localstorage' ,          id  : 'myProxyKey'      } }); //获取原有的数据 store.load(); //添加数据 store.add({      query: 'Sencha Touch' }); store.add({      query: 'Ext JS' }); //同步，执行完这一步，数据才会被保存起来。 store.sync();

成功执行完毕后，打开浏览器的调试窗口，使用Chrome浏览器的话，只要点击Resources选项卡，展开左侧的Local Storage点击里面的Local Files，就可以在右侧看到刚才插入的数据了。如果你使用火狐浏览器的话，就在DOM选项卡中查看。如果你用的是其他的浏览器的话，就问度娘和谷歌吧。

 

注意：Sencha Touch 2.0 pr1和pr2中存在bug，会导致本地存储无法正常使用。在这里，威老给出一个比较好的解决方案，供大家学习使用。

威老采取的做法是重写一个本地存储代理，让它覆盖原有的代理的type。因此上述代码不用改变，仅需在使用之前引入我们重写的这个本地存储代理类。并且，一旦官方修正了这个问题，只需要将这个类的引入移除即可，不用修改其它源码。重写的代理类如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

Ext.define( 'MyLocalStorage' ,{ //类名可以自己改。      alias: 'proxy.localstorage' , //覆盖原有的localstorage的type      extend: 'Ext.data.proxy.LocalStorage' ,      batch: function (operations, listeners){          var me = this ,          batch = Ext.create( 'Ext.data.Batch' , { //          proxy: me,  //Batch没有对proxy进行初始化因此此句无效。              listeners: listeners || {}          }),          useBatch = me.batchActions,          records;          batch.proxy = me; //把设置proxy的工作移到Batch创建完毕后。          Ext.each(me.batchOrder.split( ',' ), function (action){              records = operations[action];              if (records) {                  if (useBatch) {                      batch.add(Ext.create( 'Ext.data.Operation' , {                          action: action,                          records: records                      }));                  }                  else {                      Ext.each(records, function (record){                          batch.add(Ext.create( 'Ext.data.Operation' , {                              action: action,                              records: [record]                          }));                      });                  }              }          });          batch.start();          return batch;      } });

大家可以把这个类放到一个单独的文件里，要用到本地存储的时候，就引入它。

会话存储代理(type: 'sessionstorage')

localStorage和sessionStorage的用法是一致的。唯一不同点就是，sessionStorage只在一次会话中生效，浏览器关闭的同时，数据清除；而localStorage是永久的存储，用户下次打开浏览器的时候，数据还在。