の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

まず、それは私のために動作しません。私は使用しようとした完全な例を与えることができます。 2番目に、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

これを解決する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を設定することにより、第二の方法。このようにして、リスナー関数はフォームのメソッドに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