Ext.defineを利用したクラス生成：flexSetterの特徴 – Ext JS 4

前回に引き続き、Ext JS 4の新しいクラスシステムの解説をします。
Ext JS 4でクラスを定義するには、今後、Ext.extendではなくExt.defineを利用することは、前回ふれました。

Ext.defineは内部的に、Ext.Function.flexSetterを利用してクラスに対してコンフィグオプション（クラスプロパティ）を設定する際に、自動的にsetter/getterを生成する機構を備えています。

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

<span style="color: #990000;">// {{{ PD.Main</span>

<span style="color: #990000;">/**
 * PD.Mainクラスを作成します。
 * flexSetterでsetter/getterが自動的に作成される様を確認
 */</span>
Ext.define(<span style="color: #009900;">'PD.Main'</span>, {

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

    config: {

        <span style="color: #990000;">// getCount / setCount</span>
        count: <span style="color: #009900;">4</span>,

        <span style="color: #990000;">// getCount / setCount</span>
        amount: <span style="color: #009900;">1000</span>
    },

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

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

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

        <span style="color: #990000;">// コンフィグオプション初期化</span>
        me.initConfig(config);
    }

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

});

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

// {{{ PD.Main

/**

* PD.Mainクラスを作成します。

* flexSetterでsetter/getterが自動的に作成される様を確認

*/

Ext.define('PD.Main', {

// {{{ config

config: {

// getCount / setCount

count: 4,

// getCount / setCount

amount: 1000

// }}}

// {{{ constructor

constructor : function(config) {

var me = this;

// コンフィグオプション初期化

me.initConfig(config);

}

// }}}

});

// }}}

コンフィグオプションについての説明はしませんが、クラスのメンバでコンストラクタオブジェクトで設定するものですね。
Ext JS 3までは、コンポーネントに対して指定するものでしたが、Ext JS 4からは、クラスに対して指定することができます。

configというキーにオブジェクトをKet/Valueのオブジェクトを指定することが可能です。
このconfigに指定したオブジェクト内のキー名の先頭文字が大文字化（キャピタライズ）されて、setXXXX,getXXXXというsetter/getterが実装されます。
上記のコードの場合、setCount / getCountと setAmount / getAmountメソッドが自動的に作成されます。

では、早速、クラスを生成してみましょう。

<span style="color:#990000;">// {{{ create PD.Main</span>

<span style="color:#000099;">var</span> main = <span style="color:#000099;">new</span> PD.Main({amount: <span style="color:#009900;">6000</span>});

<span style="color:#990000;">// config.count値取得</span>
console.log(main.getCount());   <span style="color:#990000;">// 4</span>

<span style="color:#990000;">// config.amount値取得</span>
console.log(main.getAmount()); <span style="color:#990000;">// 6000</span>

<span style="color:#990000;">// config.count値設定</span>
main.setCount(<span style="color:#009900;">100</span>);
console.log(main.getCount());   <span style="color:#990000;">// 100</span>

<span style="color:#990000;">// config.amount値設定</span>
main.setCount(<span style="color:#009900;">3000</span>);
console.log(main.getCount());   <span style="color:#990000;">// 3000</span>

<span style="color:#990000;">// config.count値リセット</span>
main.resetCount();
console.log(main.getCount());   <span style="color:#990000;">// 4</span>

<span style="color:#990000;">// config.amount値リセット</span>
main.resetAmount();
console.log(main.getAmount());   <span style="color:#990000;">// 6000</span>

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

// {{{ create PD.Main

var main = new PD.Main({amount: 6000});

// config.count値取得

console.log(main.getCount()); // 4

// config.amount値取得

console.log(main.getAmount()); // 6000

// config.count値設定

main.setCount(100);

console.log(main.getCount()); // 100

// config.amount値設定

main.setCount(3000);

console.log(main.getCount()); // 3000

// config.count値リセット

main.resetCount();

console.log(main.getCount()); // 4

// config.amount値リセット

main.resetAmount();

console.log(main.getAmount()); // 6000

// }}}

実際に、値が取得、設定できていることが確認できます。また、resetXXXXという名前のメソッドも同時に設定されています。
setter / getter 以外に、初期値に戻すメソッドまで自動的に生成されます。

・・・・気づきましたか？

クラス生成時に、コンフィグオプションオブジェクトを渡していて、amountの値が6000と設定されています。
クラス定義時は、1000です。生成時にコンフィグオプションを設定することで初期値をオーバーライドできます。

ただ、注意していただきたいのが、クラス定義時にamountを定義せずに、コンフィグオプションでamountを設定してもsetter / getterは生成されません。
これだけでも、本来setter / getter作らなくてはならない・・というコードはかなりの量になりますが、自動的にでき、かつコード量がセーブされていますね。すばらしい。

さらにです。

<span style="color:#990000;">// {{{ PD.Main</span>

<span style="color:#990000;">/**
 * PD.Mainクラスを作成します。
 * flexSetterでsetter/getterが自動的に作成される様を確認
 */</span>
Ext.define(<span style="color:#009900;">'PD.Main'</span>, {

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

    config: {

        <span style="color:#990000;">// getCount / setCount</span>
        count: <span style="color:#009900;">4</span>,

        <span style="color:#990000;">// getCount / setCount</span>
        amount: <span style="color:#009900;">1000</span>
    },

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

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

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

        <span style="color:#990000;">// コンフィグオプション初期化</span>
        me.initConfig(config);
    },

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

    applyCount : <span style="color:#000099;">function</span>(val) {
        <span style="color:#000099;">return</span> val + <span style="color:#009900;">'回目'</span>;
    }

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

});

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

// {{{ PD.Main

/**

* PD.Mainクラスを作成します。

* flexSetterでsetter/getterが自動的に作成される様を確認

*/

Ext.define('PD.Main', {

// {{{ config

config: {

// getCount / setCount

count: 4,

// getCount / setCount

amount: 1000

// }}}

// {{{ constructor

constructor : function(config) {

var me = this;

// コンフィグオプション初期化

me.initConfig(config);

// }}}

// {{{ applyCount

applyCount : function(val) {

return val + '回目';

}

// }}}

});

// }}}

applyCountというメソッドが内部的に生成されます。同様にapplyAmountも存在します。
値が設定する場合に呼び出されるメソッドも自動的に作成され、自分自身でオーバーライドすることで、コンフィグオプションに値を設定する際に、カスタムコードを入れ込むことが可能です。

先ほどと同じくクラスを生成して、consoleを確認してみてください。カウント値を取得した時に、後ろに”回目”という文字列が付加されていることが確認できます。
前述のとおり、この機能はExt.define自身の機能ではなく、Ext.Function.flexSetterの機能をExt.defineが利用して実現されています。

まだまだ、Ext.defineは周りのローレベルクラスたちにより豊富な機能が提供されています。
引き続き報告いたします。

Ext.defineを利用したクラス生成：flexSetterの特徴 – Ext JS 4

Ext.defineを利用したクラス生成：flexSetterの特徴 – Ext JS 4

One thought on “Ext.defineを利用したクラス生成：flexSetterの特徴 – Ext JS 4”

カテゴリー