Ext JS - 自动添加监听器
Ext JS - adding listeners automatically
假设我们有一个包含很多元素的表单。
我想要一种通过通用代码的方法,以便能够向这些元素添加侦听器,例如,所有具有内置 focus
事件的元素,如文本输入或下拉菜单,将有这个 onFocus
监听器。在粗略的伪代码中,是这样的:
for each element in document
if hasBuiltInFocusEvent(element)
element.addListener(element, 'focus', indicateOnFocus);
function indicateOnFocus(element)
{
log(currentTime(), element.id, 'focus');
}
理想情况下,无需 修改元素的现有 class 定义。我可以在显示表单之前调用一次代码来设置监听器。
请原谅我普遍缺乏知识。我感兴趣的是这是否可行,特别是避免必须为每个元素硬编码侦听器,因为通用的泛型方法有很多优点。
在开箱即用的 Ext JS 中全局报告焦点更改:
Ext.on('focus', function(data) {
console.log('Focus changed from ' + data.fromElement + ' to ' + data.toElement);
});
有几种方法可以实现这一点。对于焦点事件,正如DrakeES所说,它已经存在了。
对于不是的事件,您可以从字段(例如在基本字段 class 中)到表单冒泡事件。在表单中,您可以收听该事件,在处理程序中,您可以查看哪个字段使事件冒泡。
这是一些未经测试的代码:
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Enter your name',
items: [
{
xtype: 'textfield',
**bubbleEvents: 'TheEvent',**
label: 'First Name',
name: 'firstName'
},
{
xtype: 'textfield',
**bubbleEvents: 'TheEvent',**
label: 'Last Name',
name: 'lastName'
}
]
}
],
listeners: {
/*
* TheEvent( this, e, eOpts )
*
* this : Ext.field.Field
* e : Event - The tap event
* eOpts : Object - The options object passed to Ext.util.Observable.addListener.
*/
TheEvent: function (field, event, opt) {
/*
* fireEvent( eventName, args ) : Boolean
*
* eventName : String - The name of the event to fire.
* args : Object... - Variable number of parameters are passed to handlers.
*/
this.fireEvent('formfieldTheEvent', field, event, opt);
}
}
});
从那里您可以从您的控制器或其他任何地方收听 'formfieldTheEvent' 并检查触发事件的字段,例如通过名称或 ID 或操作。
您也可以通过在事件域中绑定事件来完成此操作。使用正确的 select 或者您可以 select 表单上的所有字段并绑定您喜欢的事件。
Ext.define('CustomController', {
extend: 'Ext.app.Controller',
init: function() {
this.listen({
controller: {},
component: {
'textfield': {
TheEvent: function(field, event, eOpts ) {
....
}
}
},
direct: {},
global: {},
store: {}
});
}
})
假设我们有一个包含很多元素的表单。
我想要一种通过通用代码的方法,以便能够向这些元素添加侦听器,例如,所有具有内置 focus
事件的元素,如文本输入或下拉菜单,将有这个 onFocus
监听器。在粗略的伪代码中,是这样的:
for each element in document
if hasBuiltInFocusEvent(element)
element.addListener(element, 'focus', indicateOnFocus);
function indicateOnFocus(element)
{
log(currentTime(), element.id, 'focus');
}
理想情况下,无需 修改元素的现有 class 定义。我可以在显示表单之前调用一次代码来设置监听器。
请原谅我普遍缺乏知识。我感兴趣的是这是否可行,特别是避免必须为每个元素硬编码侦听器,因为通用的泛型方法有很多优点。
在开箱即用的 Ext JS 中全局报告焦点更改:
Ext.on('focus', function(data) {
console.log('Focus changed from ' + data.fromElement + ' to ' + data.toElement);
});
有几种方法可以实现这一点。对于焦点事件,正如DrakeES所说,它已经存在了。
对于不是的事件,您可以从字段(例如在基本字段 class 中)到表单冒泡事件。在表单中,您可以收听该事件,在处理程序中,您可以查看哪个字段使事件冒泡。
这是一些未经测试的代码:
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Enter your name',
items: [
{
xtype: 'textfield',
**bubbleEvents: 'TheEvent',**
label: 'First Name',
name: 'firstName'
},
{
xtype: 'textfield',
**bubbleEvents: 'TheEvent',**
label: 'Last Name',
name: 'lastName'
}
]
}
],
listeners: {
/*
* TheEvent( this, e, eOpts )
*
* this : Ext.field.Field
* e : Event - The tap event
* eOpts : Object - The options object passed to Ext.util.Observable.addListener.
*/
TheEvent: function (field, event, opt) {
/*
* fireEvent( eventName, args ) : Boolean
*
* eventName : String - The name of the event to fire.
* args : Object... - Variable number of parameters are passed to handlers.
*/
this.fireEvent('formfieldTheEvent', field, event, opt);
}
}
});
从那里您可以从您的控制器或其他任何地方收听 'formfieldTheEvent' 并检查触发事件的字段,例如通过名称或 ID 或操作。
您也可以通过在事件域中绑定事件来完成此操作。使用正确的 select 或者您可以 select 表单上的所有字段并绑定您喜欢的事件。
Ext.define('CustomController', {
extend: 'Ext.app.Controller',
init: function() {
this.listen({
controller: {},
component: {
'textfield': {
TheEvent: function(field, event, eOpts ) {
....
}
}
},
direct: {},
global: {},
store: {}
});
}
})