正确扩展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() {
        ...
    }
};

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

首选使用initComponent ，因为它专门设计为重写子类。

Answer 2

那么，目前框架中没有干净的解决方案; 但是有点像这样的kludgy可以使用相对安全：

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

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

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

Answer 3

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

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

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

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

Answer 4

在版本6.02中，在子视图中使用新方法配置viewConfig时，仍会在viewConfig中保留其他方法。 真的很好。