Ext JS - 自动添加监听器

假设我们有一个包含很多元素的表单。Ext JS - 自动添加监听器

我想通过泛型代码的方式，以便能够添加侦听器到这些元素，以便例如，所有与内置focus事件的元素（如文本输入或下拉列表）将具有此onFocus侦听器。在粗糙的伪代码，像这样：

for each element in document 
    if hasBuiltInFocusEvent(element) 
     element.addListener(element, 'focus', indicateOnFocus); 

function indicateOnFocus(element) 
{ 
    log(currentTime(), element.id, 'focus'); 
}

理想的情况下，而不必修改元素的现有类定义。我可以在显示表单之前调用一次代码来设置监听器。

请原谅我普遍缺乏的知识。我感兴趣的是这是否可行，特别是避免为每个元素硬编码一个监听器，因为通用的泛型方法有很多优点。

来源

2015-07-10 Buddy

焦点变化在Ext JS的全球报道的开箱：

Ext.on('focus', function(data) { 
    console.log('Focus changed from ' + data.fromElement + ' to ' + data.toElement); 
});

来源

2015-07-10 11:04:33 Greendrake

有几种方法可以做到这一点。对于DrakeES提到的焦点事件，它已经在那里。

对于不是的事件，例如，可以将事件从字段（如在基本字段类中）冒泡到表单。在表单中，您可以听到该事件并在处理程序中查看哪个字段确实将事件向上冒泡。

下面是一些非测试代码：

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动作触发事件，例如。

您还可以通过绑定事件域中的事件来实现此目的。使用正确的选择器，您可以选择表单上的所有字段并绑定您喜欢的事件。

Ext.define('CustomController', { 
    extend: 'Ext.app.Controller', 
    init: function() { 
     this.listen({ 
      controller: {}, 
      component: { 
       'textfield': { 
        TheEvent: function(field, event, eOpts) { 
         .... 
        } 
       } 
      }, 
      direct: {}, 
      global: {}, 
      store: {} 
     }); 
    } 
})

来源

2015-07-14 06:36:21 Tarabass

Ext JS - 自动添加监听器

回答

相关问题