初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

ミックスインの作り方

今回はミックスインを作ってみます。

ミックスインは、利用するクラスにメソッド、プロパティを追加して利用できるようにするもので、同じような機能が必要になる場合に有用です。

プラグインに似ていますが、下記の違いがあります。

1. プラグインの場合はpluginsプロパティ指定時にパラメータを指定できるが、ミックスインはできない。

2. プラグインの場合はあくまで内部にプラグインのインスタンスを保持しているだけで、
プラグインクラスで定義しているメソッド等が利用する側のクラスに影響しないが、
ミックスインで定義したメソッド等は利用する側のクラスに定義される。

ミックスインクラス作成

ミックスインクラスを作ってみましょう。

Ext.define('Sample.mixin.HelloWorldOutput', {
    mixinId: 'helloworld',

    count: 0,

    greet: function () {
        Ext.Msg.alert('', 'Hello, World!![count = ' + (++this.count) + ']');
    }
});

ミックスインとして定義するクラスは、特に継承する必要はありません。ただ、作法としてmixinIdプロパティを指定するようにしましょう。

あとは必要なプロパティやメソッドを定義するだけです。

ミックスインクラスを使う

次に作成したミックスインクラスを使ってみます。

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

    cls: 'sample-panel',

    mixins: [
        'Sample.mixin.HelloWorldOutput'
    ],

    items: {
        xtype: 'button',
        text: 'Push',
        handler: function () {
            this.up('sample_panel').greet();
        }
    }
});

ミックスインクラスを使うようにするには、mixinsプロパティでクラス名を指定します。

これでミックスインクラスで定義されたプロパティやメソッドを呼び出せるようになったので、ボタンを押してもgreetメソッドが解決できます。

f:id:sham-memo:20180108185559p:plain

実際に確認しても、利用する側のクラスにメソッドやプロパティが定義されていることが分かります。

f:id:sham-memo:20180108185708p:plain

正直なところ、私自身、継承・プラグインミックスインの厳密な使い分けまでは理解できていません。

これだという答えをお持ちの方はご教示ください( )