Ext.defineを利用したクラス生成：オーバーライド – Ext JS 4

今回は、Ext.defineで定義されたクラスに対して、メンバをオーバーライドするための手法をご紹介します。

Ext JS 3までは、Ext.overrideメソッドを利用していました。このメソッドを利用することで、Ext JS自体のバグを緊急パッチとして修正できましたし、今後ご紹介する動的ローディングも存在しなかったためデバッグのためにExt.overrideを利用してきました。
しかし、Ext JS 4 では、オーバーライドを行うのは定義されたクラスオブジェクト自身で行います。

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

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

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

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

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

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

});

overrideCls.override({

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

    originMethod : <span style="color:#000099;">function</span>() {

        <span style="color:#000099;">var</span> me = <span style="color:#000099;">this</span>;

        console.log(<span style="color:#009900;">&quot;overrided method called.&quot;</span>);

        <span style="color:#990000;">// call original method.</span>
        me.callOverridden();

    }

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

});

<span style="color:#000099;">var</span> OC = <span style="color:#000099;">new</span> overrideCls();
OC.originMethod();  <span style="color:#990000;">// &quot;overrided method called.&quot;</span>
                    <span style="color:#990000;">// &quot;originMethod called.&quot;</span>

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

// {{{ overrideCls

Ext.define('overrideCls', {

// {{{ originMethod

originMethod : function() {

console.log("originMethod called.");

}

// }}}

});

overrideCls.override({

// {{{ originMethod

originMethod : function() {

var me = this;

console.log("overrided method called.");

// call original method.

me.callOverridden();

}

// }}}

});

var OC = new overrideCls();

OC.originMethod(); // "overrided method called."

// "originMethod called."

// }}}

定義したoverrideClsオブジェクトには、overrideメソッドが準備されています。
このoverrideメソッドを利用して、所定のメンバをオーバーライドします。

今回のExt.defineで定義したクラスに実装されているoverrideメソッドの特徴として、ただオーバーライドできるだけでありません。
”上書きする前のメソッドもコールすることができる”点が、Ext.overrideとは大きく違う点です。
上書き前のメソッドをコールするためには、this.callOverriddenを利用します。

このcallOverridenメソッドは、通常の関数コール同様、引数を設定したり、戻り値を取得したりすることができます。

このように、クラスメンバのオーバーライド手法も変化しました。
便利になりましたね。

Ext.defineを利用したクラス生成：オーバーライド – Ext JS 4

Ext.defineを利用したクラス生成：オーバーライド – Ext JS 4

One thought on “Ext.defineを利用したクラス生成：オーバーライド – Ext JS 4”

カテゴリー