簡體   English   中英

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

[英]Ext Js Attach Event Handler In Parent Container To Its Child Item

組件定義:

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

子項的“ select ”處理程序必須創建一個小部件並將該小部件添加到其父items數組中。

在此子項中,它是其“選擇”處理程序,我可以通過一些搜索技術找到其父項。 但我想避免這種情況。 我也沒有父母的引用變量。

更好的方法是-在父項中創建函數,然后以某種方式將其附加到子項:

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

問題是,如何附加onSiRemoteCombo

我在這里找到了類似的解決方案: 如何為子組件的自定義事件創建偵聽器

首先,它對我不起作用。 我可以舉一個我嘗試使用的完整示例。 第二,我想通過最普通的方式/在普通的地方創建項目,而不是通過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中都可以

在孩子中附加處理程序並訪問其父級? 孩子不應該依賴父母。 只有父母應該知道該怎么辦。

解決此問題的一種方法是將組合項目組件的初始化包裝到窗體的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。 這樣,偵聽器功能將解析為表單的方法。 再次,一些代碼:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM