渲染后如何向组件添加插件？答案

【问题标题】：How to add a plugin to a component after render?渲染后如何向组件添加插件？
【发布时间】：2013-01-14 11:26:41
【问题描述】：

我有一个自定义插件，要在某些事件触发后添加到组件中。该事件在组件被渲染到页面后触发（虽然它不是 afterrender 事件，它是一个 keyup 事件）。所以这个插件也是在渲染之后添加的。看来我需要以某种方式刷新组件的配置才能使插件生效。或者可能有另一种方法可以做到这一点？

【问题讨论】：

标签： javascript extjs javascript-framework

【解决方案1】：

可以这样做，但插件的 api 不支持。在我们的代码库中，我们有一个执行此逻辑的实用程序方法。在通过Ext.apply(this, {plugins: ...}) 定义类时，首选插件添加器功能，因为允许扩展和实例化类通过配置动态添加插件。

这是使用覆盖：

Ext.override(Ext.Component, {
    addPlugin: function(p) {
        //constructPlugin is private.
        //it handles the various types of acceptable forms for
        //a plugin
        var plugin = this.constructPlugin(p);
        this.plugins = Ext.Array.from(this.plugins);

        this.plugins.push(plugin);

        //pluginInit could get called here but
        //the less use of private methods the better
        plugin.init(this);

        return plugin;
    }
});
//EXAMPLE
Ext.define('PluginLogger', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.logger',
    init: function(c) {
        console.log(c.plugins);
    }
});

var comp = new Ext.Component({
    plugins: 'logger'
});
//logs [plugin]

comp.addPlugin({
    ptype: 'logger'
});
// logs [plugin, plugin]

【讨论】：