Ext JS的附加事件處理程序父容器到其子項

Question

組件定義：

Ext.define('Retroplanner.view.dimension.DimensionMapping', { 
    alias: 'widget.dimensionMapping', 
    extend: 'Ext.form.Panel', 
    ... 
    items: [{ 
     xtype: 'combo' 
    }, ... 
    ] 

A「select」的子項的處理程序必須創建一個小部件，這個小部件添加到items陣列其父。

在這個子項的內部，它的'select'處理程序，我可以通過一些搜索技術找到它的父項。但如果可能的話，我想避免它。我沒有父母的引用變量。

一個更好的辦法是 - 在父創建功能，並以某種方式將其固定到子項：

Ext.define('Retroplanner.view.dimension.DimensionMapping', { 
    ... 
    onSiRemoteCombo: function(cmb, rec, idx) { 
     alert("select handler"); 
     var newItem = Ext.widget('somexType'); 
     this.items.add(newItem); 
    } 

的問題，如何安裝onSiRemoteCombo？

我已經找到了一個類似的解決方案在這裏：How to create listener for child component's custom event

首先，它不適合我的工作。我可以給出一個我嘗試使用的完整示例。 第二，我想通過常見的方式/在普通的地方創建項目，而不是通過initComponent方法。我想有這樣的：

Ext.define('Retroplanner.view.dimension.DimensionMapping', { 
... 
afterRender: function() { 
    var me = this; 
    //exception here 
    //Uncaught TypeError: Cannot read property 'on' of undefined 
    me.items[0].on('select', onSiRemoteCombo, this); 
}, 

items: [{ 
     xtype: 'combo' 
    }, ... 
], 

onSiRemoteCombo: function(cmb, rec, idx) { 
    alert("Ttt"); 
    var dimensionMapping = Ext.widget('propGrid'); 
    this.getParent().add(dimensionMapping); 
} 

但我得到一個異常：

//exception here 
//Uncaught TypeError: Cannot read property 'on' of undefined 
me.items[0].on('select', onSiRemoteCombo, this); 

而且還附加一個監聽每個渲染之後，真的是一個壞主意。

這樣的用例是否有任何最佳實踐？理想情況下，如果它可以在不同版本的Ext JS中工作，至少在5.x和6.x中可以使用

將子句處理程序添加到子項中並訪問其父項？小孩不應該依賴其父母。只有父母應該知道，該怎麼做。

Answer 1

解決此問題的一種方法是將組合項目組件初始化包裝到窗體的initComponent方法中。通過這種方式設置組合監聽器時，可以使用this.formMethod來引用表單方法。下面是一些代碼：

Ext.define('Fiddle.view.FirstForm', { 
    extend: 'Ext.form.Panel', 
    bodyPadding: 15, 

    initComponent: function() { 
     Ext.apply(this, { 
      items: [{ 
       xtype: 'combo', 
       fieldLabel: 'First Combo', 
       store: ['first', 'second'], 
       listeners: { 
        'select': this.onComboSelect 
       } 
      }] 
     }); 

     this.callParent(); 
    }, 

    onComboSelect: function() { 
     alert('I am a first form method'); 
    } 
}); 

通過使用組合的字符串監聽器，並通過設置defaultListenerScope爲true表格中的第二種方法。通過這種方式，偵聽器函數將爲表單的方法resolved。再次，一些代碼：

Ext.define('Fiddle.view.SecondForm', { 
    extend: 'Ext.form.Panel', 
    bodyPadding: 15, 
    defaultListenerScope: true, 

    items: [{ 
     xtype: 'combo', 
     fieldLabel: 'Second Combo', 
     store: ['first', 'second'], 
     listeners: { 
      'select': 'onComboSelect' 
     } 
    }], 

    onComboSelect: function() { 
     alert('I am a second form method'); 
    } 
}); 

這裏是一個工作擺弄這兩種方法：https://fiddle.sencha.com/#view/editor&fiddle/27un