ExtJs4学习（八）数据代理Proxy

ExtJs4学习（⼋）数据代理Proxy
ExtJs数据代理我们介绍常⽤的四种，但会着重介绍ajax代理，因为⽇常开发中，这个最为常⽤
Ext.data.proxy.Ajax
AjaxProxy(Ajax数据代理类)是你的应⽤程序中使⽤最⼴泛的获取数据的⽅式. 它使⽤AJAX请求来从服务器获取数据, 然后通常将它们放⼊Store中. 让我们来看⼀个典型的配置. 这⾥我们为⼀个Store设置⼀个AjaxProxy代理. ⾸先我们准备好⼀个Model:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});
//⼀个包含AjaxProxy代理的Store, 使⽤参数⽅式绑定.
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'users.json'
}
});
store.load();
store.on('load',function(store,records){
store.each(function(record){
console.log(record.get('name'));
});
})
这⾥说明下官⽹的例⼦是直接使⽤store.each ⽅法，但那是没⽤的
store 中each()⽅法的使⽤应在load完使⽤，确切的说应该在on('load')事件中使⽤，切记
我们的例⼦将会把user数据加载到Store中, ⾸先我们定义⼀个Model, Model包含的字段(fields)即为从服务器返回数据的相应字段. 接下来我们定义⼀个Store, 它包含了⼀
个proxy配置项. 此配置项将会⾃动转换为⼀个 Ext.data.proxy.Ajax类的实例, 此实例包含了我们定义的url参数. 这等效于下⾯这段代码
new Ext.data.proxy.Ajax({
url: 'users.json',
model: 'User',
reader: 'json'
});
这⾥出现了两个额外的参数 - model和reade. 这些参数在通过Store来创建proxy实例时是默认指定的 - Store中已经定义了 Model,并且Proxy的默
认Reader为JsonReader.
最后我们调⽤store.load(), 触发执⾏AjaxProxy的action, 向配置的url发送请求(本⽰例为'users.json'). 由于我们执⾏的是数据读取, 所以讲发送⼀个GET⽅式的
请求.(请求⽅式的定义参见actionMethods - 默认所有读数据请求（read）的⽅式为GET, ⽽所有写请求（create、update、destroy）的⽅式为POST)
配置项
actionMethods: {
create : 'POST',
read : 'GET',
update : 'POST',
destroy: 'POST'
}
限制
配置Reader和Writer
AjaxProxy可以配置任意类型的Reader来解读服务器端的响应. 如果不显式指定Reader, 将默认使⽤JsonReader. 可以使⽤简单属性对象的⽅式来配置Reader,
代理将⾃动将其转换为Reader类的实例:
var proxy = new Ext.data.proxy.Ajax({
model: 'User',
reader: {
type: 'xml',
root: 'users'
}
});
proxy.getReader(); //返回⼀个XmlReader的实例.
⽣成Url
AjaxProxy会⾃动将排序,过滤,翻页和分组参数添加到⽣成的url中. 可以使⽤下⾯这些属性来配置这些参数:
- 控制如何向服务器发送页数(同样参见startParam和limitParam)
- 控制如何向服务器发送排序信息
- 控制如何向服务器发送分组信息
- 控制如何向服务器发送过滤信息
每个AjaxProxy发出的请求对象由⼀个Operation对象来描述. 为了说明我们是如何⽣成⾃定义url的, 让我们看看下⾯这个Operation:
var operation = new Ext.data.Operation({
action: 'read',
page : 2
});
然后我们⽤此Operation来发布请求, 通过调⽤:
var proxy = new Ext.data.proxy.Ajax({
url: '/users'
});
proxy.read(operation); //GET /users?page=2
很简单吧 - Proxy代理类只需要复制Operation中的page值即可. 我们还能⾃定义如何向服务器发送page数据:
var proxy = new Ext.data.proxy.Ajax({
url: '/users',
pageParam: 'pageNumber', //默认page
});
proxy.read(operation); //GET /users?pageNumber=2
还有另⼀个⽅案, 可以配置Operation来发送start和limit参数代替page:
var operation = new Ext.data.Operation({
action: 'read',
start : 50,
limit : 25
});
var proxy = new Ext.data.proxy.Ajax({
url: '/users'
});
proxy.read(operation); //GET /users?start=50&limit;=25
同样地我们可以⾃定义startParam limitParam
var proxy = new Ext.data.proxy.Ajax({
url: '/users',
startParam: 'startIndex',//默认start
limitParam: 'pageSize'//默认limit
});
proxy.read(operation); //GET /users?startIndex=50&pageSize;=25
AjaxProxy还会向服务器发送排序和过滤信息. 让我们来看看如何使⽤Operation来表⽰:
var operation = new Ext.data.Operation({
action: 'read',
sorters: [
new Ext.util.Sorter({
property : 'name',
direction: 'ASC'
}),
new Ext.util.Sorter({
property : 'age',
direction: 'DESC'
})
],
filters: [
new Ext.util.Filter({
property: 'eyeColor',
value : 'brown'
})
]
});
当使⽤⼀个包含sorters和filters参数的来加载数据时, 就会在内部⽣成上⾯这样的对象. 默认情况下, AjaxProxy 会对sorters和filters进⾏JSON转换, 从⽽得到如下结果(注意
url发送前会被加密, 这⾥为便于阅读使⽤未加密的串):
var proxy = new Ext.data.proxy.Ajax({
url: '/users'
});
proxy.read(operation); //GET /users?sort=[{"property":"name","direction":"ASC"},{"property":"age","direction":"DESC"}]&filter;=[{"property":"eyeColor","value":"brown"}]
同样地我们能够⾃定义这些参数项. 假设我们的服务器读取排序信息的格式是"sortBy=name#ASC,age#DESC". 我们可以像这样配置AjaxProxy来提供这种格式:
var proxy = new Ext.data.proxy.Ajax({
url: '/users',
sortParam: 'sortBy',
filterParam: 'filterBy',
//我们⾃定义实现排序信息转码⽅法 - 将sorters转换为"name#ASC,age#DESC"
encodeSorters: function(sorters) {
var length = sorters.length,
sortStrs = [],
sorter, i;
for (i = 0; i < length; i++) {
sorter = sorters[i];
sortStrs[i] = sorter.property + '#' + sorter.direction
}
return sortStrs.join(",");
}
});
proxy.read(operation); //GET /users?sortBy=name#ASC,age#DESC&filterBy;=[{"property":"eyeColor","value":"brown"}]
同样我们还能够通过⾃定义实现⽅法来对filters信息进⾏转码
Ext.data.proxy.JsonP
<script src="/users?callback=someCallback"></script>
在我们注⼊了上⾯这个标签后, 浏览器就会向这个url发送⼀个请求. 通过url中的callback, 我们通知domainB的服务器: 当结果返回时请调⽤此回调函数并传⼊返回的数据. 只要服务器将响应结果组成如下格式, 调⽤就成功了:
Ext.regModel("User",{
fields:[
{name:'name',type:'string'}
],
proxy:{
type:'jsonp',//跨域交互的代理
url:'/extjs/person.php'
}
});
var person = Ext.ModelManager.getModel('User');
person.load(1,{
scope:this,
success:function(model){
alert(model.get('name'));
}
});
Ext.data.proxy.LocalStorage
LocalStorageProxy使⽤最新的HTML5本地数据库API, 将数据保存在本地客户端. HTML5本地数据库是⼀个键值对存储(例如不能存储像JSON这样的复杂对
象), 因此LocalStorageProxy在保存和读取数据时, ⾃动进⾏序列化和反序列化.
本地数据库在保存⽤户个⼈信息时⾮常有⽤, 从⽽不再需要在服务端建⽴数据结构.
Ext.define('User', {
fields: ['id', 'name'],
extend: 'Ext.data.Model',
proxy: {
type: 'localstorage'
}
});
var store = new Ext.data.Store({
model:'User'
});
store.add({name:'somnus'});
// 保存数据
store.sync();
// 读取数据
store.load();
store.each(function(record){
(record.get('name'));
});
Ext.data.proxy.Memory
内存代理. 此代理使⽤简单的本地变量进⾏数据的存储/读取, 所以其内容将在每次页⾯刷新时被清除.
通常此代理并不直接使⽤, ⽽是作为Store的辅助服务对象, 为其在加载数据时提供reader对象. 例如, 假设我们有⼀个 User Model和Store, 以及⼀些我们想要加载的内部数据, 但是这些数据的格式并不是很合适: 这时我们就可以⽤⼀个带有JsonReader的MemoryProxy 来为Store读取这些数据:
//我们将在store中使⽤的model对象
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'phone', type: 'string', mapping: 'phoneNumber'}
]
});
//数据字段不是按照model中定义排列的 - 字段'phone'在此称为'phoneNumber'
var data = {
users: [
{
id: 1,
name: 'Ed Spencer',
phoneNumber: '555 1234'
},
{
id: 2,
name: 'Abe Elias',
phoneNumber: '666 1234'
}
]
};
//请注意我们是如何通过设置reader的'root'来满⾜上⾯的数据结构的.
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'User',
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users'
}
}
});
var memoryProxy = Ext.create("Ext.data.proxy.Memory",{
data:data,
model:'User'
})
data.push({name:'sunday',age:1});
memoryProxy.update(
new Ext.data.Operation(
{
action:'update',
data:data
}),
function(result){},
this
);
memoryProxy.read(
new Ext.data.Operation(),
function(result){
var datas = result.resultSet.records;
Ext.each(datas,function(model){
(model.get('name'));
});
var totalRecords = result.resultSet.total;
alert('读取内存数据，记录总是：' + totalRecords); }
);。