1：Ext.data.DataProxy
DataProxy的意思就是数据代理，基类是DataProxy，在Ext Js中，数据代理类又扩展了三个数据代理类：MemoryProxy, HttpProxy和ScriptTagProxy，数据代理类是一个纯虚类，主要用于生成Ext.data.Record对象，没有公共的属性和方法，只是规定了子类需要处理三个事件：
beforeload: {Object this, Object params}
load: {Object this, Object o, Object arg}
loadexception: {Object this, Object o, Object arg, Object e}2:Ext.data.MemoryProxy
/**
* @class Ext.data.MemoryProxy
* @extends Ext.data.DataProxy
* An implementation of Ext.data.DataProxy that simply passes the data specified in its constructor
* to the Reader when its load method is called.
* @constructor
* @param {Object} data The data object which the Reader uses to construct a block of Ext.data.Records.
*/
Ext.data.MemoryProxy = function(data){
// Must define a dummy api with "read" action to satisfy DataProxy#doRequest and Ext.data.Api#prepare *before* calling super
var api = {};
api[Ext.data.Api.actions.read] = true;
Ext.data.MemoryProxy.superclass.constructor.call(this, {
api: api
});
this.data = data;
};
Ext.extend(Ext.data.MemoryProxy, Ext.data.DataProxy, {
/**
* @event loadexception
* Fires if an exception occurs in the Proxy during data loading. Note that this event is also relayed
* through {@link Ext.data.Store}, so you can listen for it directly on any Store instance.
* @param {Object} this
* @param {Object} arg The callback's arg object passed to the {@link #load} function
* @param {Object} null This parameter does not apply and will always be null for MemoryProxy
* @param {Error} e The JavaScript Error object caught if the configured Reader could not read the data
*/
/**
* MemoryProxy implementation of DataProxy#doRequest
* @param {String} action
* @param {Ext.data.Record/Ext.data.Record[]} rs If action is load, rs will be null
* @param {Object} params An object containing properties which are to be used as HTTP parameters
* for the request to the remote server.
* @param {Ext.data.DataReader} reader The Reader object which converts the data
* object into a block of Ext.data.Records.
* @param {Function} callback The function into which to pass the block of Ext.data.Records.
* The function must be passed <ul>
* <li>The Record block object</li>
* <li>The "arg" argument from the load function</li>
* <li>A boolean success indicator</li>
* </ul>
* @param {Object} scope The scope (<code>this</code> reference) in which the callback function is executed. Defaults to the browser window.
* @param {Object} arg An optional argument which is passed to the callback as its second parameter.
*/
doRequest : function(action, rs, params, reader, callback, scope, arg) {
// No implementation for CRUD in MemoryProxy. Assumes all actions are 'load'
params = params || {};
var result;
try {
result = reader.readRecords(this.data);
}catch(e){
// @deprecated loadexception
this.fireEvent("loadexception", this, null, arg, e);
this.fireEvent('exception', this, 'response', action, arg, null, e);
callback.call(scope, null, arg, false);
return;
}
callback.call(scope, result, arg, true);
}
});load方法是被store调用的，MemoryProxy调用store传入的DataReader读取构造函数中传入的数据对象，这样就可以证明传入的数据的格式必须可以被DataReader读取，如果要传入一个Array数组对象，那么DataReader就得到了一个ArrayReader
load(Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg);用来取数据，和HttpProxy相似，只是params参数没有被使用。
使用实例：
var proxy = new Ext.data.MemoryProxy([[
1, 'Bill', 'Gardener'
], [
2, 'Ben', 'Horse'
]]);
var reader = new Ext.data.ArrayReader({id: 0}, [
{name: 'name', mapping: 1},
{name: 'occupation', mapping: 2}
]);
var metadata;
function callback(data, arg, success) {
metadata = data;
}
proxy.load(null, reader, callback, this);
3：Ext.data.HttpProxy
An implementation of Ext.data.DataProxy that processes data requests within the same domain of the originating page.
Note: this class cannot be used to retrieve data from a domain other than the domain from which the running page was served. For cross-domain requests, use a ScriptTagProxy.
Be aware that to enable the browser to parse an XML document, the server must set the Content-Type header in the HTTP response to "text/xml".HttpProxy使用HTTP协议，通过Ajax去后台取数据，构造它时需要设置url: 'xxx.jsp'参数，这里的url可以替换任何一个合法的地址，这样HttpProxy才知道去哪里获取数据，
如下所示：
/**
* @class Ext.data.HttpProxy
* @extends Ext.data.DataProxy
* <p>An implementation of {@link Ext.data.DataProxy} that processes data requests within the same
* domain of the originating page.</p>
* <p><b>Note</b>: this class cannot be used to retrieve data from a domain other
* than the domain from which the running page was served. For cross-domain requests, use a
* {@link Ext.data.ScriptTagProxy ScriptTagProxy}.</p>
* <p>Be aware that to enable the browser to parse an XML document, the server must set
* the Content-Type header in the HTTP response to "<tt>text/xml</tt>".</p>
* @constructor
* @param {Object} conn
* An {@link Ext.data.Connection} object, or options parameter to {@link Ext.Ajax#request}.
* <p>Note that if this HttpProxy is being used by a {@link Ext.data.Store Store}, then the
* Store's call to {@link #load} will override any specified <tt>callback</tt> and <tt>params</tt>
* options. In this case, use the Store's {@link Ext.data.Store#events events} to modify parameters,
* or react to loading events. The Store's {@link Ext.data.Store#baseParams baseParams} may also be
* used to pass parameters known at instantiation time.</p>
* <p>If an options parameter is passed, the singleton {@link Ext.Ajax} object will be used to make
* the request.</p>
*/
Ext.data.HttpProxy = function(conn){
Ext.data.HttpProxy.superclass.constructor.call(this, conn);
/**
* The Connection object (Or options parameter to {@link Ext.Ajax#request}) which this HttpProxy
* uses to make requests to the server. Properties of this object may be changed dynamically to
* change the way data is requested.
* @property
*/
this.conn = conn;
// nullify the connection url. The url param has been copied to 'this' above. The connection
// url will be set during each execution of doRequest when buildUrl is called. This makes it easier for users to override the
// connection url during beforeaction events (ie: beforeload, beforewrite, etc).
// Url is always re-defined during doRequest.
this.conn.url = null;
this.useAjax = !conn || !conn.events;
// A hash containing active requests, keyed on action [Ext.data.Api.actions.create|read|update|destroy]
var actions = Ext.data.Api.actions;
this.activeRequest = {};
for (var verb in actions) {
this.activeRequest[actions[verb]] = undefined;
}
};
Ext.extend(Ext.data.HttpProxy, Ext.data.DataProxy, {
/**
* Return the {@link Ext.data.Connection} object being used by this Proxy.
* @return {Connection} The Connection object. This object may be used to subscribe to events on
* a finer-grained basis than the DataProxy events.
*/
getConnection : function() {
return this.useAjax ? Ext.Ajax : this.conn;
},
/**
* Used for overriding the url used for a single request. Designed to be called during a beforeaction event. Calling setUrl
* will override any urls set via the api configuration parameter. Set the optional parameter makePermanent to set the url for
* all subsequent requests. If not set to makePermanent, the next request will use the same url or api configuration defined
* in the initial proxy configuration.
* @param {String} url
* @param {Boolean} makePermanent (Optional) [false]
*
* (e.g.: beforeload, beforesave, etc).
*/
setUrl : function(url, makePermanent) {
this.conn.url = url;
if (makePermanent === true) {
this.url = url;
this.api = null;
Ext.data.Api.prepare(this);
}
},
/**
* HttpProxy implementation of DataProxy#doRequest
* @param {String} action The crud action type (create, read, update, destroy)
* @param {Ext.data.Record/Ext.data.Record[]} rs If action is load, rs will be null
* @param {Object} params An object containing properties which are to be used as HTTP parameters
* for the request to the remote server.
* @param {Ext.data.DataReader} reader The Reader object which converts the data
* object into a block of Ext.data.Records.
* @param {Function} callback
* <div class="sub-desc"><p>A function to be called after the request.
* The <tt>callback</tt> is passed the following arguments:<ul>
* <li><tt>r</tt> : Ext.data.Record[] The block of Ext.data.Records.</li>
* <li><tt>options</tt>: Options object from the action request</li>
* <li><tt>success</tt>: Boolean success indicator</li></ul></p></div>
* @param {Object} scope The scope (<code>this</code> reference) in which the callback function is executed. Defaults to the browser window.
* @param {Object} arg An optional argument which is passed to the callback as its second parameter.
* @protected
*/
doRequest : function(action, rs, params, reader, cb, scope, arg) {
var o = {
method: (this.api[action]) ? this.api[action]['method'] : undefined,
request: {
callback : cb,
scope : scope,
arg : arg
},
reader: reader,
callback : this.createCallback(action, rs),
scope: this
};
// If possible, transmit data using jsonData || xmlData on Ext.Ajax.request (An installed DataWriter would have written it there.).
// Use std HTTP params otherwise.
if (params.jsonData) {
o.jsonData = params.jsonData;
} else if (params.xmlData) {
o.xmlData = params.xmlData;
} else {
o.params = params || {};
}
// Set the connection url. If this.conn.url is not null here,
// the user must have overridden the url during a beforewrite/beforeload event-handler.
// this.conn.url is nullified after each request.
this.conn.url = this.buildUrl(action, rs);
if(this.useAjax){
Ext.applyIf(o, this.conn);
// If a currently running request is found for this action, abort it.
if (this.activeRequest[action]) {
// Disabled aborting activeRequest while implementing REST. activeRequest[action] will have to become an array
// TODO ideas anyone?
//
//Ext.Ajax.abort(this.activeRequest[action]);
}
this.activeRequest[action] = Ext.Ajax.request(o);
}else{
this.conn.request(o);
}
// request is sent, nullify the connection url in preparation for the next request
this.conn.url = null;
},
/**
* Returns a callback function for a request. Note a special case is made for the
* read action vs all the others.
* @param {String} action [create|update|delete|load]
* @param {Ext.data.Record[]} rs The Store-recordset being acted upon
* @private
*/
createCallback : function(action, rs) {
return function(o, success, response) {
this.activeRequest[action] = undefined;
if (!success) {
if (action === Ext.data.Api.actions.read) {
// @deprecated: fire loadexception for backwards compat.
// TODO remove
this.fireEvent('loadexception', this, o, response);
}
this.fireEvent('exception', this, 'response', action, o, response);
o.request.callback.call(o.request.scope, null, o.request.arg, false);
return;
}
if (action === Ext.data.Api.actions.read) {
this.onRead(action, o, response);
} else {
this.onWrite(action, o, response, rs);
}
};
},
/**
* Callback for read action
* @param {String} action Action name as per {@link Ext.data.Api.actions#read}.
* @param {Object} o The request transaction object
* @param {Object} res The server response
* @fires loadexception (deprecated)
* @fires exception
* @fires load
* @protected
*/
onRead : function(action, o, response) {
var result;
try {
result = o.reader.read(response);
}catch(e){
// @deprecated: fire old loadexception for backwards-compat.
// TODO remove
this.fireEvent('loadexception', this, o, response, e);
this.fireEvent('exception', this, 'response', action, o, response, e);
o.request.callback.call(o.request.scope, null, o.request.arg, false);
return;
}
if (result.success === false) {
// @deprecated: fire old loadexception for backwards-compat.
// TODO remove
this.fireEvent('loadexception', this, o, response);
// Get DataReader read-back a response-object to pass along to exception event
var res = o.reader.readResponse(action, response);
this.fireEvent('exception', this, 'remote', action, o, res, null);
}
else {
this.fireEvent('load', this, o, o.request.arg);
}
// TODO refactor onRead, onWrite to be more generalized now that we're dealing with Ext.data.Response instance
// the calls to request.callback(...) in each will have to be made identical.
// NOTE reader.readResponse does not currently return Ext.data.Response
o.request.callback.call(o.request.scope, result, o.request.arg, result.success);
},
/**
* Callback for write actions
* @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
* @param {Object} trans The request transaction object
* @param {Object} res The server response
* @fires exception
* @fires write
* @protected
*/
onWrite : function(action, o, response, rs) {
var reader = o.reader;
var res;
try {
res = reader.readResponse(action, response);
} catch (e) {
this.fireEvent('exception', this, 'response', action, o, response, e);
o.request.callback.call(o.request.scope, null, o.request.arg, false);
return;
}
if (res.success === true) {
this.fireEvent('write', this, action, res.data, res, rs, o.request.arg);
} else {
this.fireEvent('exception', this, 'remote', action, o, res, rs);
}
// TODO refactor onRead, onWrite to be more generalized now that we're dealing with Ext.data.Response instance
// the calls to request.callback(...) in each will have to be made similar.
// NOTE reader.readResponse does not currently return Ext.data.Response
o.request.callback.call(o.request.scope, res.data, res, res.success);
},
// inherit docs
destroy: function(){
if(!this.useAjax){
this.conn.abort();
}else if(this.activeRequest){
var actions = Ext.data.Api.actions;
for (var verb in actions) {
if(this.activeRequest[actions[verb]]){
Ext.Ajax.abort(this.activeRequest[actions[verb]]);
}
}
}
Ext.data.HttpProxy.superclass.destroy.call(this);
}
});实例代码：
var store = new Ext.data.store({
r1: 'xxx.jsp',
reader: new Ext.data.xmlReader({
record: 'plant'
}, Plant),
sortInfo: {
field: 'common',
direction: 'asc'
}
});
store.load();store的load方法调用proxy的load方法，传入的参数如下
*params:store.load(options)时传入的参数对象options，在store的load方法中会对options进行封装。
*reader: store中DataReader, 此处为Ext.data.XmlReader
*callback:store的loadRecords方法
*scope:回调函数执行的作用域，如是让loadRecords方法在store方法中执行，还是在其他对象中执行。
*arg: store.load(options)时传入的参数对象options，没有进行封装的options。
在HttpProxy的load方法中，首先发起一个新的请求，在获取数据前触发beforeload事件
4：Ext.data.ScriptTagProxy
An implementation of Ext.data.DataProxy that reads a data object from a URL which may be in a domain other than the originating domain of the running page.
Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain of the running page, you must use this class, rather than HttpProxy.
The content passed back from a server resource requested by a ScriptTagProxy must be executable JavaScript source code because it is used as the source inside a <script> tag.
In order for the browser to process the returned data, the server must wrap the data object with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy. Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy depending on whether the callback name was passed:
Ext.data.ScriptTagProxy是解决跨域访问的，在服务器端需要做一些处理，而不是单纯的返回JSON字符串，下面是实例：
boolean scriptTag = false;
String cb = request.getParameter("callback");
if (cb != null) {
scriptTag = true;
response.setContentType("text/javascript");
} else {
response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (scriptTag) {
out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (scriptTag) {
out.write(");");
} <!--省略部分代码-->
String cb = request.getParameter("callback");
response.setContentType("text/javascript");
Writer out = response.getWriter();
out.write(cb + "(");
out.print("[" +
"['id1', 'name1', 'descn1']" +
"['id2', 'name2', 'descn2']" +
"]");
out.write(");");
<!--省略部分代码-->其中的关键就在于从请求中获得的callback参数，这个参数就叫做回调函数。ScriptTagProxy会在当前的HTML页面里添加一个<script type="text/javascript" src="xxx.jsp"></script>的标签，然后把后台返回的内容添加到这个标签中，这样就可以解决跨域访问数据的问题，为了让后台返回的内容可以在动态生成的标签中运行，Ext Js会生成一个名为callback的回调函数，并把回调函数的名称传递到后台，由后台生成callback（data）形式的响应内容，然后返回给前台自动运行。
扫一扫
354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
