Ext.defineを利用したクラス生成：メンバ定義を後から行う – Ext JS 4

引き続き、Ext.defineの話。
クラス定義を行った後に、動的にメンバ定義を行うための手法をご説明します。

通常、クラス定義を行う際にExt.extendの時も、オブジェクトリテラルで定義して終わりでした。
JavaScriptなので、無理矢理追加することも可能でしたが、Ext JS 4 からは、これらの操作を行うためのメソッドが用意されています。

そのメソッドとは、extendです。
あれ？Ext.extend復活？？いいえ、違います。定義したクラスオブジェクトのメソッドになります。

次のコードをご覧ください。

<span style="color:#990000;">// {{{ extendCls</span>

Ext.define(<span style="color:#009900;">'extendCls'</span>, {
});

<span style="color:#990000;">// }}}</span>
<span style="color:#990000;">// {{{ afterAddedStaticMethod</span>

extendCls.extend(<span style="color:#009900;">'afterAddedStaticMethod'</span>, <span style="color:#000099;">function</span>() {
    console.log(<span style="color:#009900;">&quot;afterAddedStaticMethod&quot;</span>);
});

<span style="color:#990000;">// }}}</span>
<span style="color:#990000;">// {{{ Object Style</span>

extendCls.extend({

    <span style="color:#990000;">// {{{ afterAddedStaticMethodObjectStyle</span>

    afterAddedStaticMethodObjectStyle :<span style="color:#000099;">function</span>() {
        console.log(<span style="color:#009900;">&quot;afterAddedStaticMethodObjectStyle&quot;</span>);
    }

    <span style="color:#990000;">// }}}</span>

});

extendCls.afterAddedStaticMethod(); <span style="color:#990000;">// &quot;afterAddedStaticMethod&quot;</span>
extendCls.afterAddedStaticMethodObjectStyle(); <span style="color:#990000;">// &quot;afterAddedStaticMethodObjectStyle&quot;</span>

<span style="color:#990000;">// }}}</span>

// {{{ extendCls

Ext.define('extendCls', {

});

// }}}

// {{{ afterAddedStaticMethod

extendCls.extend('afterAddedStaticMethod', function() {

console.log("afterAddedStaticMethod");

});

// }}}

// {{{ Object Style

extendCls.extend({

// {{{ afterAddedStaticMethodObjectStyle

afterAddedStaticMethodObjectStyle :function() {

console.log("afterAddedStaticMethodObjectStyle");

}

// }}}

});

extendCls.afterAddedStaticMethod(); // "afterAddedStaticMethod"

extendCls.afterAddedStaticMethodObjectStyle(); // "afterAddedStaticMethodObjectStyle"

// }}}

追加のやり方は、key/valueの順に設定する方法と、オブジェクト指定して複数指定する方法の2種類が提供されます。

利用するコード部分をお気づきになりましたか？そうです、このextendメソッドは、静的メンバを動的に追加するためのメソッドです。
これでは、クラス定義のstaticsを動的に設定できるだけです。ここから、本番です。
メンバ定義を後から動的に行うメソッド、それは、implimentです。

早速、上記のコードの後ろに追加して、動的にメンバを実装してみましょう。

<span style="color:#990000;">// {{{ afterAddedDynamicMethod</span>

extendCls.implement(<span style="color:#009900;">'afterAddedDynamicMethod'</span>, <span style="color:#000099;">function</span>() {
    console.log(<span style="color:#009900;">&quot;afterAddedDynamicMethod&quot;</span>);
});

<span style="color:#990000;">// }}}</span>
<span style="color:#990000;">// {{{ Object Style</span>

extendCls.implement({

    <span style="color:#990000;">// {{{ afterAddedDynamicMethodObjectStyle</span>

    afterAddedDynamicMethodObjectStyle : <span style="color:#000099;">function</span>() {
        console.log(<span style="color:#009900;">&quot;afterAddedDynamicMethodObjectStyle&quot;</span>);
    }

    <span style="color:#990000;">// }}}</span>

});

<span style="color:#000099;">var</span> EC = <span style="color:#000099;">new</span> extendCls();
EC.afterAddedDynamicMethod();   <span style="color:#990000;">// &quot;afterAddedDynamicMethod&quot;</span>
EC.afterAddedDynamicMethodObjectStyle();    <span style="color:#990000;">// &quot;afterAddedDynamicMethodObjectStyle&quot;</span>

<span style="color:#990000;">// }}}</span>

// {{{ afterAddedDynamicMethod

extendCls.implement('afterAddedDynamicMethod', function() {

console.log("afterAddedDynamicMethod");

});

// }}}

// {{{ Object Style

extendCls.implement({

// {{{ afterAddedDynamicMethodObjectStyle

afterAddedDynamicMethodObjectStyle : function() {

console.log("afterAddedDynamicMethodObjectStyle");

}

// }}}

});

var EC = new extendCls();

EC.afterAddedDynamicMethod(); // "afterAddedDynamicMethod"

EC.afterAddedDynamicMethodObjectStyle(); // "afterAddedDynamicMethodObjectStyle"

// }}}

利用方法は、extendとimplementは、同じですね。
2つの違いを理解して、ケースバイケースで利用することで、柔軟な設計が可能になりそうですね。

Ext.defineを利用したクラス生成：メンバ定義を後から行う – Ext JS 4

Ext.defineを利用したクラス生成：メンバ定義を後から行う – Ext JS 4

カテゴリー