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 - 自動添加監聽器

回答

相關問題