Extjs：覆盖特定侦听器

Question

我有一个窗口组件，我正在扩展它来创建不同的窗口。现在，

close()

和

hide()

侦听器函数在所有方面都是相同的，但

afterrender()

会随每个实例而变化。

所以我有类似的东西：

Ext.define('abc.xyz.BaseWindow', {
    extend : "Ext.Window",
    listeners: {
        hide: function(el, eOpts){
            console.log('hide');
        },
        close: function(el, eOpts){
            console.log('close');
        }   
    }
});

并且：

Ext.define('abc.xyz.MyWindow', {
        extend : "abc.xyz.BaseWindow",
        listeners: {
            afterrender: function(el, eOpts){
                console.log('afterrender');
            }
        }
    });

但是，整个

listeners

对象会被覆盖，并且

hide()

和

close()

永远不会被调用。除了在每个扩展窗口中指定

hide()

和

close()

之外，还有什么办法可以解决这个问题吗？

Answer 1

您可以在窗口中定义函数，调用它们并在窗口中覆盖它们，如下所示：

Ext.define('abc.xyz.BaseWindow', {
    extend : "Ext.Window",
    onHide: function(){
        console.log('hide');
    },
    onShow: function(el, eOpts){
        console.log('close');
    },
    onAfterRender: function(el, eOpts){
        console.log('first after render');
    },

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            listeners: {
                hide: me.onHide,
                show: me.onShow
                afterrender: me.onAfterRender
            }
        });

        me.callParent(arguments);
    }
});

并且：

Ext.define('abc.xyz.MyWindow', {
    extend : "abc.xyz.BaseWindow",
    onAfterRender: function(el, eOpts){
        console.log('second after render');
    }
});

或者，如果你在基类中没有后渲染，你只需添加一个监听器（on），就像 Evan Trimboli sais

Ext.define('abc.xyz.MyWindow', {
    extend : "abc.xyz.BaseWindow",
    initComponent: function () {
        var me = this;
        me.callParent(arguments);

        me.on('afterrender', function(el, eOpts){
            console.log('second after render');
        });
    }
});

Answer 2

使用构造函数和合并监听器：

Ext.define('abc.xyz.BaseWindow', {
    extend : "Ext.Window",
    
    listeners: {
        hide: function(el, eOpts) {
            console.log('hide');
        },
        close: function(el, eOpts) {
            console.log('close');
        },
    },
    
    constructor: function (config) {
        const { listeners } = config || {};

        if (listeners) {
            config.listeners = { ...this.listeners, ...listeners };
        }

        this.callParent([config]);
    },
});