Alternate names
Ext.data.ScriptTagProxyHierarchy
Ext.BaseExt.data.proxy.ProxyExt.data.proxy.ServerExt.data.proxy.JsonPInherited mixins
Requires
Files
JsonP代理用在当你想从你自己的应用服务器以外的域名加载数据时(跨域调用). 比如你的应用运行在http://domainA.com上, 那么就无法通过 Ajax从http://domainB.com加载数据, 因为浏览器不允许跨域的ajax请求.
而通过JsonP代理我们可以摆脱这个限制. 每当进行AJAX请求时, JsonP代理就在DOM中注入一个<script>标签. 比如我们想从http://domainB.com/users
这个url下加载数据, 那么就会注入一个如下的script标签:
<script src="http://domainB.com/users?callback=someCallback"></script>
在我们注入了上面这个标签后, 浏览器就会向这个url发送一个请求. 通过url中的callback, 我们通知domainB的服务器: 当结果返回时请调用 此回调函数并传入返回的数据. 只要服务器将响应结果组成如下格式, 调用就成功了:
someCallback({
users: [
{
id: 1,
name: "Ed Spencer",
email: "ed@sencha.com"
}
]
});
一旦script结束加载, url中的'someCallback'函数就将被调用, 并传入服务器返回的JSON对象.
上面这些过程都由JsonP代理自动实现. 它会格式化你的url, 自动添加callback参数. 它甚至还会创建一个临时的回调函数, 等待函数被调用后将 数据放入代理, 使得一切看起来就像只是通过一个普通的Ajax代理实现的. 下面是使用的例子:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'jsonp',
url : 'http://domainB.com/users'
}
});
store.load();
我们要做的就这么多, 剩下的都由JsonP去打理. 这个例子中, 代理将会注入一个这样的script标签:
<script src="http://domainB.com/users?callback=callback1"></script>
script标签可以通过callbackKey参数进行自定义, 例如:
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'jsonp',
url : 'http://domainB.com/users',
callbackKey: 'theCallbackFunction'
}
});
store.load();
将会注入这样的标签:
<script src="http://domainB.com/users?theCallbackFunction=callback1"></script>
远程服务器端需要进行设置以返回响应格式的数据. 这里给出一些用Java, PHP 和 ASP.net实现的示例:
Java:
boolean jsonP = false;
String cb = request.getParameter("callback");
if (cb != null) {
jsonP = true;
response.setContentType("text/javascript");
} else {
response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (jsonP) {
out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (jsonP) {
out.write(");");
}
PHP:
$callback = $_REQUEST['callback'];
// 创建输出对象
$output = array('a' => 'Apple', 'b' => 'Banana');
// 开始输出
if ($callback) {
header('Content-Type: text/javascript');
echo $callback . '(' . json_encode($output) . ');';
} else {
header('Content-Type: application/x-json');
echo json_encode($output);
}
ASP.net:
String jsonString = "{success: true}";
String cb = Request.Params.Get("callback");
String responseString = "";
if (!String.IsNullOrEmpty(cb)) {
responseString = cb + "(" + jsonString + ")";
} else {
responseString = jsonString;
}
Response.Write(responseString);
指定的urls中所调用的CRUD，即"create"，"read"，"update"和"destroy"操作方法。默认为:
api: {
create : undefined,
read : undefined,
update : undefined,
destroy : undefined
}
该url的生成基于使用对应的api属性中所执行[create|read|update|destroy]的动作action， 或者如果为undefined则默认为已配置的 Ext.data.Store.url。
示例:
api: {
create : '/controller/new',
read : '/controller/load',
update : '/controller/update',
destroy : '/controller/destroy_action'
}
如果指定的URL对于所给定CRUD动作为undefined， 那么CRUD的action请求将指向已配置的url。
'true'表示自动将请求参数添加到生成的url中. 默认为'true'.
Defaults to: true
设置为true，则在同步store时，进行特定类型的批量操作。默认为true。
Defaults to: true
当执行批量操作时调用的以逗号进行分隔的，顺序为'create'，'update'和'destroy'的操作。 重写该属性为一个不同的顺序，以使批量处理的CRUD操作按其顺序来执行。默认为'create,update,destroy'。
Defaults to: "create,update,destroy"
当使用noCache属性时，添加到url中的缓存参数名称。默认"_dc"。
Defaults to: "_dc"
要绑定到该Proxy上的Model模型。可以是Model的字符串名称， 或指向到Model构造函数的一个引用。必选。
要绑定到该Proxy上的Model模型。可以是Model的字符串名称， 或指向到Model构造函数的一个引用。必选。
要在request中发送的名称为'page'的参数。默认为'page'。 如果不想要发送一个page参数的话就将该配置项设置为undefined。
Defaults to: "page"
Ext.data.reader.Reader，用来对服务器端响应数据进行解码，或从客户端读取数据。 它可以是一个Reader实例，一个配置对象或只是一个有效的Reader类型名称(例如 'json', 'xml')。
将数据记录传给服务器端时, 数据使用的参数名(例如'records=someEncodedRecordString'). 默认为'records'
Defaults to: "records"
结合remoteSort启用simpleSortMode，当一个远程排序请求时， 将只发送一个sort和direction属性。 带有属性名和'ASC'或'DESC'属性值的directionParam和sortParam将被发送过去。
Defaults to: false
要在request中发送的名称为'sort'的参数。默认为 'sort'。 如果不想要发送一个sort参数的话就将该配置项设置为undefined。
Defaults to: "sort"
要在request中发送的名称为'start'的参数。默认为'start'。 如果不想要发送一个start参数的话就将该配置项设置为undefined。
Defaults to: "start"
Ext.data.writer.Writer，用来对任何要发送到服务器端的请求进行编码，或将数据写入保存到客户端。 它可以是一个Writer实例，一个配置对象或只是一个有效的Writer类型名称(例如 'json', 'xml')。
扩展事件
Defaults to: []
本对象包含任何有监听器的事件的键。监听器可以在实例上直接设置， 或者在其类或者父类(通过observe) 或者在MVC EventBus上设置。本对象的值为真 (一个非零的数字)和假(0或者undefined)。它们并不代表确切的监听器数量。 如果事件必须被触发，它的值是真的， 如果没有必要，就是假的。
本属性的设计目的是避免没有监听器时调用fireEvent的开销。 如果fireEvent要调用成百上千次，这尤其有用。 用法:
if (this.hasListeners.foo) {
this.fireEvent('foo', this, arg1);
}
在本类中设置为true将一个对象标识为实例化的Observable或其子类。
Defaults to: true
本身
获取当前类的引用，此对象被实例化。不同于 statics,
this.self是依赖范围，它意味着要使用动态继承。
参见 statics 详细对比
Ext.define('My.Cat', {
statics: {
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
alert(this.self.speciesName); // 依赖 'this'
},
clone: function() {
return new this.self();
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
}
});
var cat = new My.Cat(); // alerts 'Cat' 猫
var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' 雪豹
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
如果当前已经有另一个服务器请求正在进行中, 就中止它.
成员
向本对象添加一个事件处理函数，例如:
myGridPanel.on("mouseover", this.onMouseOver, this);
这个方法也允许传递单个参数，参数为一个 包含指定多个事件的属性的配置对象。例如:
myGridPanel.on({
cellClick: this.onCellClick,
mouseover: this.onMouseOver,
mouseout: this.onMouseOut,
scope: this // Important. Ensure "this" is correct during handler execution
});
你也能为每个事件处理函数单独指定选项：
myGridPanel.on({
cellClick: {fn: this.onCellClick, scope: this, single: true},
mouseover: {fn: panel.onMouseOver, scope: panel}
});
也能使用在特定作用域的方法名。注意
必须指定scope:
myGridPanel.on({
cellClick: {fn: 'onCellClick', scope: this, single: true},
mouseover: {fn: 'onMouseOver', scope: panel}
});
被监听的事件名。 也可以是属性名字是事件名字的对象。
事件调用的方法, 或者如果指定了scope，在指定scope的方法名*。
会被调用，
参数为fireEvent的参数加上下述options参数。
事件处理函数执行的作用域(this应用的上下文)
如果省略, 默认为触发事件的对象。
包含事件处理函数配置的对象。
注意: 不像ExtJS 3.x, options对象也会作为最后一个参数 传递给每一个事件处理函数。
这个对象可能包含以下任何一个属性:
事件处理函数执行的作用域(this应用的上下文)
如果省略, 默认为触发事件的对象。
事件触发后，调用事件处理函数延时毫秒数。
设置为true添加一个事件处理函数，只处理下一次触发的事件, 然后移除这个函数。
使事件处理函数在Ext.util.DelayedTask中调度运行， 延时指定的毫秒数。如果事件在这段事件再次触发， 原先的事件处理函数不再调用, 新的事件处理函数接替。
只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的，不会调用事件处理函数
这个选项只对绑定在Components上的监听器有效。 Component的一个属性名，这个属性引用一个待添加监听器的元素
这个选项在Component构造过程中向Components的元素添加DOM事件监听器有用。 这些元素只有在Component渲染之后才会存在。 例如, 向Panel的body中添加click监听器:
new Ext.panel.Panel({
title: 'The title',
listeners: {
click: this.handlePanelClick,
element: 'body'
}
});
组合选项
使用options参数, 可以组合不同类型的监听器：
一个延时的一次性监听器：
myPanel.on('hide', this.handleClick, this, {
single: true,
delay: 100
});
向任何Observable对象（或者Ext.Element）添加监听器， 当组件被销毁时，监听器自动被移除
添加监听器的目标项。
事件名或者包含的事件名属性的对象。
(可选的) 如果ename参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename参数是事件名, 这就是(this引用的上下文)
事件处理函数执行的作用域。
(可选的)如果ename参数是事件名,
这就是addListener的选项。
可选的回调函数，在请求完成之后用来进行清理操作。
Request对象
如果请求request成功则为true
执行Operations操作的批量处理，按batchOrder所指定的顺序。 在内部通过Ext.data.Store的sync方法来使用。用法示例:
myProxy.batch({
create : [myModel1, myModel2],
update : [myModel3],
destroy: [myModel4, myModel5]
});
上述中的myModel*是Model的实例 - 在此情况中1和2是新创建的实例， 并未进行保存，3先前已进行保存但是需要更新， 4和5已经进行保存但是现在需要执行销毁操作。
请注意以前版本的这种方法带有2个参数(operations和listeners)。现在依然支持带有这2个参数，
现在的参数签名为一个单一的options参数，其中可以包含operations和listeners，并附加其他选项参数。
多个参数签名很可能将在未来的版本中被否决。
Object对象，包含批量处理方法batch所支持的一个或多个属性:
Object对象，包含所要执行Model的实例，通过action名称作为键
通过Batch直接传递的事件监听对象 - 更多详细信息参见Ext.data.Batch
一个Ext.data.Batch对象 (或要用于创建batch的配置对象)。如果未指定一个默认的batch对象则将会自动创建。
batch函数执行完成时的回调函数。 回调函数会调用名为success或failure的函数，并传递以下参数:
batch处理完成之后， 所包含当前状态中的所有操作operations
最初传递到batch函数中的options选项参数
batch批量操作成功执行完成时调用的函数。
如果没有报告任何异常则将调用success函数。
如果抛出一个或多个异常则将调用failure函数。
调用的success函数中带有以下参数:
batch处理完成之后， 所包含当前状态中的所有操作operations
最初传递到batch函数中的options选项参数
batch批量操作未成功(失败)执行完成时调用的函数。 当在处理过程中一个或多个操作operations抛出异常则将调用failure函数(即使某些operations操作执行成功)。 在这种情况下，您可以检查该batch对象exceptions数组来查看到底是哪些operations操作抛出异常信息。 调用的failure函数中带有以下参数:
batch处理完成之后， 所包含当前状态中的所有操作operations
最初传递到batch函数中的options选项参数
执行任何回调函数中所在的作用域
(即在callback回调函数中的，success亦/或failure函数中的this对象)。默认指向proxy。
新创建的Batch对象
基于传递到当前Proxy所绑定的Store的options对象， 创建并返回一个Ext.data.Request对象。
将要执行的Operation操作对象
请求对象
通过给定的Ext.data.Request对象, 生成url. 并将参数和callback函数名称添加到url上.
请求对象
The url
Overrides: Ext.data.proxy.Server.buildUrl
调用原来的方法，这是以前的override重写
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
this.callOverridden();
alert("Meeeeoooowwww");
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
This method has been deprecated since 4.1
版本 使用 callParent 代替.
参数的参数，数组或'参数'对象
来自当前方法，例如： this.callOverridden(arguments)
返回调用重写方法的结果。
所谓的"parent"方法是指当前的方法。 这是以前的方法派生或重写(参见 Ext.define)。
Ext.define('My.Base', {
constructor: function (x) {
this.x = x;
},
statics: {
method: function (x) {
return x;
}
}
});
Ext.define('My.Derived', {
extend: 'My.Base',
constructor: function () {
this.callParent([21]);
}
});
var obj = new My.Derived();
alert(obj.x); // alerts 21
这可以用来重写如下:
Ext.define('My.DerivedOverride', {
override: 'My.Derived',
constructor: function (x) {
this.callParent([x*2]); // 调用原来的My.Derived构造
}
});
var obj = new My.Derived();
alert(obj.x); // 现在提示 42
This also works with static methods.
Ext.define('My.Derived2', {
extend: 'My.Base',
statics: {
method: function (x) {
return this.callParent([x*2]); // 调用 My.Base.method
}
}
});
alert(My.Base.method(10); // alerts 10
alert(My.Derived2.method(10); // alerts 20
然后，它也可以重写静态方法。
Ext.define('My.Derived2Override', {
override: 'My.Derived2',
statics: {
method: function (x) {
return this.callParent([x*2]); // 调用 My.Derived2.method
}
}
});
alert(My.Derived2.method(10); // 现在提示 40
这个参数, 通过当前方法得到数组或者 arguments 对象,
例如: this.callParent(arguments)
返回调用父类的方法的结果。
移除本对象的包括受管理的监听器在内的所有监听器
移除本对象的所有受管理的监听器
执行给定的create操作。
要执行的操作
在操作(无论是否成功)完成时要调用的回调函数
要执行的回调函数的作用域
创建并返回请求完成后执行的回调函数. 返回的函数应接收Response对象, 此对象中包含响应体的读取对象Reader. 第三个参数是请求完成 并且Reader完成响应解析后调用的回调函数. 此回调通常由store对象传入, 例如在proxy.read(operation, theCallback, scope)中 theCallback就是此函数接收的callback参数的引用.
Request对象
要执行的操作对象(Operation)
请求完成时调用的回调函数. 通常即为doRequest的callback参数.
回调函数执行的作用域
回调函数
执行给定的destroy操作。
要执行的操作
在操作(无论是否成功)完成时要调用的回调函数
要执行的回调函数的作用域
执行向远程域的读取请求. JsonP代理实际上并不创建Ajax请求, 而是通过注入一个基于Ext.data.Request对象的配置而生成的