Sencha Touch 数据层篇 Proxy(下)

最新推荐文章于 2019-08-01 09:04:10 发布

转载最新推荐文章于 2019-08-01 09:04:10 发布 · 428 阅读

sencha touch 专栏收录该内容

19 篇文章

订阅专栏

本文介绍Sencha Touch中如何使用代理进行数据存取，包括内存代理和Web存储代理的具体应用，以及解决本地存储代理存在的bug的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代理：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;
    }
});