Sencha Touch 数据层篇 Proxy(上)

来源：互联网发布：python try except e 编辑：程序博客网时间：2024/04/29 08:57

代理：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){
        varme = 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();
        returnbatch;
    }
});

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

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

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

0 0