javascript - 正确扩展 ExtJS 组件而不覆盖侦听器

Question

考虑以下示例类Parent：

Ext.define('Parent', {

    ...
    listeners: {
        render: {
            fn: doSomething
        },
    },

};

以及以下Child扩展默认值的类Parent：

Ext.define('Child', {
    extend: 'Parent',

    ...
    listeners: {
        afterrender: {
            fn: doSomething
        },
    },
};

即使Child没有指定监听器render（它只提供afterrender），render监听器（在类中定义）也不会在的组件渲染Parent时被触发；Child即监听器被新的监听器规范覆盖。

如何解决这个问题？

Answer 1

您可以在 中指定处理程序initComponent，而不是使用listeners配置对象。

Ext.define('Child', {
    extend: 'Parent',

    ...
    initComponent: function() {
        this.on('afterrender', this.onAfterRender);
    },

    onAfterRender: function() {
        ...
    }
};

listenersconfig 方法不起作用的原因是因为传递给的 config 对象Ext.define将Ext.apply'd传递给任何创建的新对象。换句话说，它完全覆盖了任何引用类型（例如listeners对象）。

使用initComponent是首选，因为它是专门为子类化而设计的。

Answer 2

好吧，目前框架中没有干净的解决方案；然而，像这样有点笨拙的东西可以相对安全地使用：

Ext.define('Child', {
    extend: 'Parent',

    listeners: Ext.merge(Parent.prototype.listeners || {}, {
        ...
    })
});

我必须承认它并不比使用好多少，initComponent但至少它更具声明性。

Answer 3

initComponent通过在using中声明事件处理程序来“修复”问题on。所以子类的示例代码是：

Ext.define('Child', {
    extend: 'Parent',

    ...
    initComponent : function(args) {
        var me = this;
        me.callParent(args);
        me.on('afterrender', me.doSomething, this);
    },
};

对我来说仍然不那么好看；如果有人有更好的解决方案，请回答问题。

Answer 4

In version 6.02 configuring viewConfig with a new method in a child, will still keep other methods within viewConfig from the parent. Really good.