ExtJS4.x数据模型之Proxy

1. 基本概述
    Proxy数据代理是进行数据读写操作的主要途径，ExtJS提供的数据代理类主要包含两大类，分别是Ext.data.proxy.Client客户端代理和Ext.data.proxy.Server服务端代理，它们都继承自Ext.data.proxy.Proxy类，客户端代理和服务端代理的子类如下：
    客户端代理：
    ● Ext.data.proxy.Memory
    ● Ext.data.proxy.WebStorage
    ● Ext.data.proxy.LocalStorage
    ● Ext.data.proxy.SessionStorage
    服务端代理：
    ● Ext.data.proxy.Ajax
    ● Ext.data.proxy.Rest
    ● Ext.data.proxy.JsonP
2. Ext.data.proxy.Proxy
    Ext.data.proxy.Proxy是所有代理类的父类，其提供了数据的基本操作方法：CRUD，即Create(创建)、Read(读取)、Update(更新)、Delete(删除)。每一个CRUD方法会得到唯一的Ext.data.Operation对象作为参数，其中封装了操作的详细内容，另外每一个CRUD方法都可以指定回调函数对数据进行处理。
3. Ext.data.proxy.Memory
    Ext.data.proxyMemory是一个简单的数据代理，它使用内存变量存取数据，因此每一次刷新页面之后数据都丢失。
1. (function() {
2.     Ext.onReady(function() {
3.         Ext.regModel('user', {
4.             fields: [
5.                 {name: 'name', type: 'string'},
6.                 {name: 'age', type: 'int'}
7.             ]
8.         });
9. 
10.         var data = [
11.             {'name': 'Elvin.Cracker', 'age': 24}
12.         ];
13. 
14.         var proxy = Ext.create('Ext.data.proxy.Memory', {
15.             data: data,
16.             model: 'user'
17.         });
18. 
19.         proxy.read(new Ext.data.Operation(), function(result) {
20.             var array = result.resultSet.records;
21.             Ext.Array.each(array, function(record) {
22.                 alert(record.get('name'));
23.             });
24.         });
25.     });
26. })();
    其实，我们可以认为数据代理是模型与数据之前的桥梁，数据代理将它们之间建立关系，然后通过数据代理进行相关的GRUD操作。
3. Ext.data.proxy.LocalStorage
    Ext.data.proxy.LocalStorage是Ext.data.proxy.WebStorage的子类，它经常用来保存不需要存储在服务器端的用户信息，这些信息不会在浏览器关闭之后消失，可以长期保存。
1. (function() {
2.     Ext.onReady(function() {
3.         Ext.regModel('user', {
4.             fields: [
5.                 {name: 'name', type: 'string'},
6.                 {name: 'age', type: 'int'}
7.             ],
8.             proxy: {
9.                 type: 'localstorage',
10.                 id: 'User-Searches'
11.             }
12.         });
13. 
14.         var store = new Ext.data.Store({
15.             model: user
16.         });
17. 
18.         store.add({'name': 'Elvin.Cracker', 'age': 24});
19. 
20.         // 保存数据
21.         store.sync();
22. 
23.         // 读取数据
24.         store.load();
25. 
26.         var message = []
27.         store.each(function(record) {
28.             message.push(record.get('name'));
29.         });
30.         alert(message.join('\n'));
31.     });
32. })();
4. Ext.data.proxy.SessionStorage
    Ext.data.proxy.SessionStorage是Ext.data.proxy.WebStorage的子类，它与Ext.data.proxy.LocalStorage的区别在于当浏览器关闭时数据会丢失，不适合长期保存数据，除此之外与LocalStorage代理的使用方式完全相同。
1. (function() {
2.     Ext.onReady(function() {
3.         Ext.regModel('user', {
4.             fields: [
5.                 {name: 'name', type: 'string'},
6.                 {name: 'age', type: 'int'}
7.             ],
8.             proxy: {
9.                 type: 'sessionstorage',
10.                 id: 'User-Searches'
11.             }
12.         });
13. 
14.         var store = new Ext.data.Store({
15.             model: user
16.         });
17. 
18.         store.add({'name': 'Elvin.Cracker', 'age': 24});
19. 
20.         // 保存数据
21.         store.sync();
22. 
23.         // 读取数据
24.         store.load();
25. 
26.         var message = []
27.         store.each(function(record) {
28.             message.push(record.get('name'));
29.         });
30.         alert(message.join('\n'));
31.     });
32. })();
5. Ext.data.proxy.Ajax
    Ext.data.proxy.Ajax是我们平时使用最广泛的数据代理方式，它采用Ajax方式通过请求指定的URL来读写数据，它不能读取跨域数据，如果需要读取跨域数据可以使用Ext.data.proxy.JsonP来实现，这里不做过多的介绍了。
1. (function() {
2.     Ext.onReady(function() {
3.         Ext.regModel('user', {
4.             fields: [{name: 'name', type: 'string'}],
5.             proxy: {
6.                 type: 'sessionstorage',
7.                 id: 'User-Searches'
8.             }
9.         });
10. 
11.         var proxy = new Ext.data.proxy.Ajax({
12.             url: '/proxy/ajax/',
13.             model: 'user',
14.             reader: 'json',
15.             limitParam: 'indexLimit'
16.         });
17. 
18.         // Ext.data.Operation()默认是读取操作
19.         proxy.doRequest(new Ext.data.Operation({
20.             action: 'read',
21.             limit: 10,
22.             start: 1,
23.             sorters: [
24.                 new Ext.util.Sorter({
25.                     property: 'name',
26.                     direction: 'ASC'
27.                 })
28.             ]
29.         }), function(operation) {
30.             var text = operation.response.responseText;
31.             alert(Ext.JSON.decode(text)['name']);
32.         });
33.     });
34. })();
    请求服务器端返回的数据，我们通过Ext.JSON.decode进行解析，而请求的URL地址为/proxy/ajax/，这里我们使用Django来作为服务器端的语言来实现。
    urls.py
1. urlpatterns = patterns('',
2.     url(r'^$', 'views.home', name='home'),
3.     url(r'^proxy/ajax/', 'views.ajax'),
4. )
    views.py
1. from django.shortcuts import render_to_response
2. from django.http import HttpResponse
3. import json
4. 
5. def home(request):
6.     return render_to_response('ajax.html')
7. 
8. def ajax(request):
9.     return HttpResponse(json.dumps({"name": "Elvin.Cracker"}), mimetype="application/json")
    同时，我们看下firebug解析ExtJS传递给后台的数据参数集合：
1. _dc 1339857488033
2. indexLimit  10
3. sort    [{"property":"name","direction":"ASC"}]
4. start   1

 

作者：追忆的风筝

转自：http://www.2cto.com/kf/201206/137162.html