プラグインの作り方

今回はプラグインを作ってみます(まあ、プラグインを自作しないといけない場面はあまり無いと思いますが...)。

プラグインは、コンポーネントに機能を追加するものです。

プラグインのクラスはExt.plugin.Abstractを継承して作成します。

作成したプラグインは、pluginsコンフィグにエイリアス名を指定して使用できます。

↓のサンプルは、指定した回数Hello, Worldを追記するというプラグイン(?)です。

Ext.define('Sample.view.plugin.HelloWorldOutput', {
    extend: 'Ext.plugin.Abstract',
    alias: 'plugin.helloworld',

    /**
     * 初期処理。
     *
     * @param {*} cmp コンポーネント
     */
    init: function (cmp) {
        var me = this,
            html = cmp.html || '',
            count = me.pluginConfig.count || 1;

        me.setCmp(cmp);

        for (var n = 0; n < count; n++) {
            html += '<div>Hello, World!!</div>';
        }

        cmp.setHtml(html);
    },

    // @override
    destroy: function () {
        var me = this;

        // MEMO: 何か破棄が必要な場合はこの辺りに書く

        me.callParent();
    }

});

Ext.define('Sample.view.sample.Panel', {
    extend: 'Ext.panel.Panel',
    xtype: 'sample_panel',

    plugins: {
        helloworld: {
            // プラグイン側ではplatformConfigから参照できる
            count: 2
        }
    },

    html: 'sample'
});

プラグインの初期処理はinitメソッド、終了処理はdestroyメソッドに記述します。

initメソッドでイベントを割り当てているような場合は、ちゃんと解除するように気を付けましょう。

プラグイン作成はめんどくさいと感じることもありますが、1つ作れば使い回せるので開発を続ける場合は結構便利です。

私の場合は、どの案件でも使えるのでファイルをドラッグ＆ドロップでアップロードする機能をプラグイン化しています。