Ext JS 4.0.7 で、クラスを作る場合…



2012年1月13日修正:
やっぱりクラス作成について、まだまだだったっぽいので修正をします。

修正箇所:
コンストラクタで「me.callParent(arguments);」を呼び出しているが、
足りなかった…

me.callParent(arguments);
me.initConfig(config); // これを追加

する必要がある。

なぜなら、config のgetter/setter は、initConfig()を呼び出す事により作成される。
そのため、上記2点の呼び出しは必須でしょう。

下記のソースにも追加しておきました。



2012年1月11日投稿:
****************修正前********************
Ext JS 4.0系 で、クラスを作成する(Ext.defineを使う)場合、
"extend:"の指定ができます。
指定しない場合は、「Ext.Base」が自動で付与されます。(確か…)

で、使ってて解った事は…
「Ext.Component」は必ず継承すべきなんだろうなぁ…
という事です。

なぜなら、
1.「Ext.Component」を継承しておけば、コンストラクタにconfig形式で値が設定できるので、
Extの使い方と同じにできる。
(config を必ず指定しなきゃだめだけど…)

2.イベントの登録ができる。

の2点です。
特に、「1.」は意外と良いです。ソース全体が統一されるので
個人的には大好きです♪

何も継承しなくても「Ext.Base」が付く(はず)なので、「Ext.Component」を継承しておくのが
無難だと思います。


以下例です。ただし、動かしてないので、動かなかったらごめんなさい。:
*************************クラス************************
Ext.define('hoge', {
    extend: 'Ext.Component',

    // 継承する場合、親クラスのconfig を必ず確認すること
    config : {
        /**
         * @cfg {String} text
         * ポップアップを表示する時のデータ(''の場合は、からのポップアップが出ます。)
         */
        text : null
    },

    statics: {
        SIZE : 6, 
        ERROR_COLOR : 'red',     
        DEFAULT_COLOR : 'black', 
    },

// コンストラクタ *************************************
    /**
     * コンストラクタ(configで設定してください)
     * コンストラクタが無ければ、自動的に text にデータが設定されます。
     */
    constructor : function(config) {

        // ExtJsのフレームワークがこんなやり方なのでマネ
        var me = this;

        // スーパークラスを呼び出す(引数は同じものを渡す)
        // コンストラクタを作った場合は、必ず呼ぶ必要があるみたい…
        me.callParent(arguments);
        me.initConfig(config);   // これを追加

        // 注意:"arguments" とは、引数の事である。JavaScript って怖いねぇ…
        // もちろん、function(config) と書いて、me.callParent(config); にしても良い。

        return me;
    },
    
    /*
     * 何かメソッド
     */
    aaa : function(){},

    ・
    ・
    ・
}

*************************呼び出し方法************************
Ext.onReady(function() {
    var hoge = new hoge( { text : 'あいうえお' } );
    console.log(hoge.getText());  // 「あいうえお」が出力

    hoge.setText('かきくけこ');
    console.warn(hoge.getText()); // 「かきくけこ」が出力
}


コメント

このブログの人気の投稿

ヨドバシカメラの店舗購入履歴を見るには…

C# の WPF の DataGrid で 行を交互に背景色を変える+選択色を変える+カラムが無い所も変える…

Visual Studio の ホットリロードが動かない場合に確認するところ