Alternate names
Ext.data.AjaxProxyExt.data.HttpProxyHierarchy
Ext.BaseExt.data.proxy.ProxyExt.data.proxy.ServerExt.data.proxy.AjaxInherited mixins
Requires
Subclasses
Files
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();
我们的例子将会把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和reader. 这些参数在通过Store来创建proxy实例时是默认指定的 - Store中已经定义了 Model,并且Proxy的默认Reader为JsonReader.
最后我们调用store.load(), 触发执行AjaxProxy的action, 向配置的url发送请求(本示例为'users.json'). 由于我们执行的是数据读取, 所以讲发送一个GET方式的请求.(请求方式的定义参见actionMethods - 默认所有读数据请求的方式为GET, 而所有写请求的方式为POST)
AjaxProxy无法跨域获取数据. 例如你的程序地址为http://domainA.com, 那么你就无法从http://domainB.com获取数据. 这是因为浏览器都有 一个内置的安全机制来阻止AJAX的跨域请求.
如果你需求从其他域名地址获取数据, 并且你无法从服务器端设置代理(某些运行在你自己服务器端的程序, 用来将请求转发给http://domainB.com, 但客户端看来数据还是来自http://domainA.com), 你可以使用Ext.data.proxy.JsonP代理和JSON-P技术, 这样只要http://domainB.com 上的服务器支持JSON-P响应, 就能够解决你的跨域请求问题. 详情参见JsonPProxy的介绍文档.
AjaxProxy可以配置任意类型的Reader来解读服务器端的响应. 如果不显式指定Reader, 将默认使用 JsonReader. 可以使用简单属性对象的方式来配置Reader, 代理将自动将其转换为Reader类的实例:
var proxy = new Ext.data.proxy.Ajax({
model: 'User',
reader: {
type: 'xml',
root: 'users'
}
});
proxy.getReader(); //返回一个XmlReader的实例.
AjaxProxy会自动将排序,过滤,翻页和分组参数添加到生成的url中. 可以使用下面这些属性来配置这些参数:
每个AjaxProxy发出的请求对象由一个Operation对象来描述. 为了说明我们是如何生成自定义url的, 让我们 看看下面这个Operation:
var operation = new Ext.data.Operation({
action: 'read',
page : 2
});
然后我们用此Operation来发布请求, 通过调用read:
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'
});
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
同样地我们可以自定义url:
var proxy = new Ext.data.proxy.Ajax({
url: '/users',
startParam: 'startIndex',
limitParam: 'limitIndex'
});
proxy.read(operation); //GET /users?startIndex=50&limitIndex;=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参数的Store来加载数据时, 就会在内部生成上面这样的对象. 默认情况下, 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"}]
同样我们还能够通过自定义实现encodeFilters方法来对filters信息进行转码.
指定的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,则在同步store时,进行特定类型的批量操作。默认为true。
Defaults to: true
当执行批量操作时调用的以逗号进行分隔的,顺序为'create','update'和'destroy'的操作。 重写该属性为一个不同的顺序,以使批量处理的CRUD操作按其顺序来执行。默认为'create,update,destroy'。
Defaults to: "create,update,destroy"
当使用noCache属性时,添加到url中的缓存参数名称。默认"_dc"。
Defaults to: "_dc"
默认注册的reader类型。默认为'json'。
Defaults to: "json"
默认注册的writer类型。默认为'json'。
Defaults to: "json"
要在请求中发送名称为direction的参数。该配置项仅仅适用于当simpleSortMode设置为true的时候。 默认为'dir'。
Defaults to: "dir"
将在每次请求中包含的额外参数。个别请求中具有相同名称的参数, 当它们冲突时,这些参数会进行重写。
将在每次请求中包含的额外参数。个别请求中具有相同名称的参数, 当它们冲突时,这些参数会进行重写。
要在request中发送的名称为'filter'的参数。默认为'filter'。 如果不想要发送一个filter参数的话就将该配置项设置为undefined。
Defaults to: "filter"
要在request中发送的名称为'group'的参数。默认为 'group'。 如果不想要发送一个group参数的话就将该配置项设置为undefined。
Defaults to: "group"
要在request中发送的名称为'limit'的参数。默认为'limit'。 如果不想要发送一个limit参数的话就将该配置项设置为undefined。
Defaults to: "limit"
一个配置对象,包含一个或多个事件处理函数,在对象初始化时添加到对象。 它应该是addListener指定的一个有效的监听器配置对象, 一次添加多个事件处理函数。
Ext JS 组建的DOM事件
虽然一些Ext JS组件类输出选定的DOM事件(例如"click"、"mouseover"等),
但是这只能通过添加额外的值(如果能)。例如,DataView的itemclick
传递被单击的节点。为了通过Component的子元素直接访问DOM事件,
我们需要指定element
选项来标识要
添加DOM监听器的Component属性:
new Ext.panel.Panel({
width: 400,
height: 200,
dockedItems: [{
xtype: 'toolbar'
}],
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){ console.log('click el'); }
},
dblclick: {
element: 'body', //bind to the underlying body property on the panel
fn: function(){ console.log('dblclick body'); }
}
}
});
要绑定到该Proxy上的Model模型。可以是Model的字符串名称, 或指向到Model构造函数的一个引用。必选。
要绑定到该Proxy上的Model模型。可以是Model的字符串名称, 或指向到Model构造函数的一个引用。必选。
要在request中发送的名称为'page'的参数。默认为'page'。 如果不想要发送一个page参数的话就将该配置项设置为undefined。
Defaults to: "page"
Ext.data.reader.Reader,用来对服务器端响应数据进行解码,或从客户端读取数据。 它可以是一个Reader实例,一个配置对象或只是一个有效的Reader类型名称(例如 'json', 'xml')。
结合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: []
action名称到HTTP请求方式的映射. 在原始的AjaxProxy中, 对于'read'动作将使用'GET',而对'create', 'update'和'destroy'将使用 'POST'. The Ext.data.proxy.Rest maps these to the correct RESTful methods.
Defaults to: {create: "POST", read: "GET", update: "POST", destroy: "POST"}
本对象包含任何有监听器的事件的键。监听器可以在实例上直接设置, 或者在其类或者父类(通过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。默认情况下, ServerProxy的buildUrl方法会追加cache-buster参数到url的末尾。子类可能会对url执行额外的修改。
请求对象request
url字符串
调用原来的方法,这是以前的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操作。
要执行的操作
在操作(无论是否成功)完成时要调用的回调函数
要执行的回调函数的作用域
TODO: This is currently identical to the JsonPProxy version except for the return function's signature. There is a lot of code duplication inside the returned function so we need to find a way to DRY this up.
请求对象
执行的Operation
请求完成时执行的回调函数. 此项通常也是传入doRequest函数的callback参数.
执行回调函数的作用域
回调函数
执行给定的destroy操作。
要执行的操作
在操作(无论是否成功)完成时要调用的回调函数
要执行的回调函数的作用域
在ServerProxy的子类中,create,read,update和destroy方法都传递给doRequest。 每个ServerProxy子类必须实现doRequest方法 - 有关示例参见Ext.data.proxy.JsonP和Ext.data.proxy.Ajax。 此方法具有每一个委派给此方法的相同签名方法。
Ext.data.Operation对象
当Operation完成时所调用的回调函数
回调函数中执行的作用域
通过调用this.getBubbleTarget()
(如果存在)允许本Observable对象触发的事件沿着继承体系起泡
在Observable基类中没有实现类。
这通常被Ext.Components用来将事件起泡到它的容器。 见Ext.Component.getBubbleTarget。Ext.Component中的默认实现 返回Component的直接容器。但是如果需要一个明显的target, 它可以被重写 以更快地访问需要的target。
使用范例:
Ext.override(Ext.form.field.Base, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});
将Ext.util.Filter对象列表数组编码为一个字符串,在所请求的url中传递并发送。 默认情况下,该方法只是对filter参数数据进行JSON-编码转换。
Filter对象列表数组
所编码的filters字符串
将Ext.util.Sorter对象列表数组编码为一个字符串,在所请求的url中传递并发送。 默认情况下,该方法只是对sorter参数数据进行JSON-编码转换。
Sorter对象列表数组
所编码的sorters字符串
模板方法以允许子类来指定如何为reader获取响应数据。
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.
服务器端响应
响应数据,将通过reader来使用
使用传递过来的参数(去掉事件名,加上传递给addListener的options
对象
)触发指定的事件。
通过调用enableBubble,一个事件 能被设置为沿着Observable的继承体系(见Ext.Component.getBubbleTarget)向上起泡。
如果任何一个事件处理函数返回false,就返回false,否则返回true。
Gets the bubbling parent for an Observable
The bubble parent. null is returned if no bubble target exists
返回request对象对应的HTTP请求方式. 默认返回actionMethods中的对应值.
请求对象
使用的HTTP请求方式 ('GET', 'POST', 'PUT'或'DELETE'中的一种)
根据请求request顺序的优先级来获取url, - The request - The api - The url
请求对象request
url字符串
这个类的初始化配置。典型例子:
Ext.define('My.awesome.Class', {
// 这是默认配置
config: {
name: 'Awesome',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome' 超级棒
配置
mixins 混入原型 键-值对
addManagedListener的简写方法
向任何Observable对象(或者Ext.Element)添加监听器, 当组件被销毁时,监听器自动被移除
添加监听器的目标项。
事件名或者包含的事件名属性的对象。
(可选的) 如果ename
参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename
参数是事件名, 这就是(this
引用的上下文)
事件处理函数执行的作用域。
(可选的)如果ename
参数是事件名,
这就是addListener的选项。
移除通过mon方法添加的监听器。
待移除监听器的项
事件名或者包含的事件名属性的对象。
(可选的) 如果ename
参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename
参数是事件名, 这就是(this
引用的上下文)
事件处理函数执行的作用域。
addListener的简写方法
向本对象添加一个事件处理函数,例如:
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
});
执行给定的read操作。
要执行的操作
在操作(无论是否成功)完成时要调用的回调函数
要执行的回调函数的作用域
从指定的Observable接替选定的事件就好像事件是this
触发的。
例如,如果你想要扩展Grid, 你可能决定转发store的一些事件。 所以你能在你的initComponent中实现这个:
this.relayEvents(this.getStore(), ['load']);
grid实例将会有一个observable的'load'事件,
这个事件的参数是store的load事件的参数。任何grid的load事件触发的函数
可以使用this
访问grid。
移除事件处理函数。
事件处理函数关联的事件类型
待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。
(可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的,否者监听器将会被移除。
移除通过mon方法添加的监听器。
待移除监听器的项
事件名或者包含的事件名属性的对象。
(可选的) 如果ename
参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename
参数是事件名, 这就是(this
引用的上下文)
事件处理函数执行的作用域。
继续事件的触发(见suspendEvents)。
如果事件被使用queueSuspended
参数挂起, 那么所有
在事件挂起期间触发的事件将会被发送到任意监听器。
设置当前proxy所关联的Model模型。它通常只能被一个Store来调用。
新的model。可以是model的字符串名称, 或对model构造函数的一个引用。
如果设置为true,并且存在Store,则将model关联到Store上。
通过字符串,配置对象或Reader实例来设置Proxy的Reader。
新的Reader,可以是一个类型字符串, 一个配置对象或一个Ext.data.reader.Reader实例
绑定的Reader对象
通过字符串,配置对象或Writer实例来设置Proxy的Writer。
新的Writer,可以是一个类型字符串, 一个配置对象或一个Ext.data.writer.Writer实例
绑定的Writer对象
获取从该对象被实例化的类的引用。 请注意不同于 self,
this.statics()
是独立的作用域,无论this
是否运行,总是返回其中的调用类。
Ext.define('My.Cat', {
statics: {
totalCreated: 0,
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
var statics = this.statics();
alert(statics.speciesName); // 总是等于'Cat',无论'this'是什么,
// 相当于:My.Cat.speciesName
alert(this.self.speciesName); // 依赖 'this'
statics.totalCreated++;
},
clone: function() {
var cloned = new this.self; // 依赖 'this'
cloned.groupName = this.statics().speciesName; // 相当于: My.Cat.speciesName
return cloned;
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
},
constructor: function() {
this.callParent();
}
});
var cat = new My.Cat(); // alerts 'Cat', 然后提示 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', 然后提示 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
alert(clone.groupName); // alerts 'Cat'
alert(My.Cat.totalCreated); // alerts 3
挂起所有事件的触发。(见resumeEvents)
传true,让挂起的事件排队而不是丢弃所有挂起的事件, 这些事件将会在调用resumeEvents之后触发。
配置扩展
removeListener的简写方法
移除事件处理函数。
事件处理函数关联的事件类型
待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。
(可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的,否者监听器将会被移除。
执行给定的update操作。
要执行的操作
在操作(无论是否成功)完成时要调用的回调函数
要执行的回调函数的作用域
方法/属性添加到这个类的原型。
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
成员
添加/重写这个类的静态属性。
Ext.define('My.cool.Class', {
...
});
My.cool.Class.addStatics({
someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'
method1: function() { ... }, // My.cool.Class.method1 = function() { ... };
method2: function() { ... } // My.cool.Class.method2 = function() { ... };
});
成员
this
这个类的原型借用另一个类的成员
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {
...
});
Thief.borrow(Bank, ['money', 'printMoney']);
var steve = new Thief();
alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'
this 借用成员
创建这个类的新实例。
Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
所有参数传递至类的构造。
创建的实例。
创建现有的原型方法的别名。例如:
Ext.define('My.cool.Class', {
method1: function() { ... },
method2: function() { ... }
});
var test = new My.cool.Class();
My.cool.Class.createAlias({
method3: 'method1',
method4: 'method2'
});
test.method3(); // test.method1()
My.cool.Class.createAlias('method5', 'method3');
test.method5(); // test.method3() -> test.method1()
别名新方法的名称,或对象设置多个别名。 参见flexSetter
原来的方法名
以字符串格式,获取当前类的名称。
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
className 类名
重写这个类的成员。通过callParent重写的方法可以调用。
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.callParent(arguments);
alert("Meeeeoooowwww");
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!我要成为一只猫!"
// alerts "I'm a cat!我是一只猫!"
// alerts "Meeeeoooowwww"
在4.1版本, 直接利用这种方法已经过时了。 使用 Ext.define 代替:
Ext.define('My.CatOverride', {
override: 'My.Cat',
constructor: function() {
alert("I'm going to be a cat!");
this.callParent(arguments);
alert("Meeeeoooowwww");
}
});
以上完成了相同的结果,但可以由Ext.Loader重写, 其目标类和生成过程中,可以决定是否需要根据目标类所需的状态覆盖管理(My.Cat)。
This method has been deprecated since 4.1.0
使用 Ext.define 代替
添加到这个类的属性。 这应当被指定为一个对象包含一个或多个属性的文字。
this class 当前类
当服务器端server返回一个异常时触发
来自AJAX请求的响应
触发请求的操作
The options object passed to Ext.util.Observable.addListener.
当proxy的reader提供新的元数据时触发。 元数据通常由新定义的字段所组成,但是可以包含应用程序所需要的配置数据, 并可根据需要在事件处理函数中进行处理。 该事件通常只是由JsonReaders触发。 注意此事件也可以通过Ext.data.Store进行传播,并通常在此进行处理。
JSON元数据
The options object passed to Ext.util.Observable.addListener.