Sencha Touch 数据层篇 Proxy(上)

代理：Proxy与数据存取

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

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

客户端代理

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

内存代理(type: 'memory')

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

//我们要读取的数据
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配置项也可以略去，这样同样能够正常读取数据。

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)方法。直接调用就像这样：

localStorage.setItem(key,value);

换一个更简洁的写法：

localStorage.key = value;

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

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。因此上述代码不用改变，仅需在使用之前引入我们重写的这个本地存储代理类。并且，一旦官方修正了这个问题，只需要将这个类的引入移除即可，不用修改其它源码。重写的代理类如下：

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是永久的存储，用户下次打开浏览器的时候，数据还在。