日々精進

新しく学んだことを書き留めていきます

Class Systemその3

2. Configuration
クラスには特殊なconfigプロパティを定義できる。configは以下の特徴を持つ。
・他のクラスから参照出来ない
・Getter,Setterメソッドが自動的に定義される
・applyメソッドが各config毎に自動的に定義される。このapplyメソッドはSetterメソッドで値をセットするのに使われる。Setterの処理を変更したかったらapplyを上書きするといいよ


コード例は以下。

Ext.define('My.own.Window', {
   /** @readonly */
    isWindow: true,

    //configを定義してる。クラス定義で代入した値はデフォルト値になる。
    config: {
        title: 'Title Here',

        bottomBar: {
            enabled: true,
            height: 50,
            resizable: false
        }
    },

    constructor: function(config) {
        this.initConfig(config);

        return this;
    },

    //Setterのカスタマイズ。Returnした値がSetされる。
    //applyの後にconfigのプロパティ名を続ければいいんだね。黒魔術的。。
    //てかこれthis.title.setConfigメソッドを上書きしたら同じことができてもっとわかりやすいんじゃ・・・?
    applyTitle: function(title) {
        if (!Ext.isString(title) || title.length === 0) {
            alert('Error: Title must be a valid non-empty string');
        }
        else {
            return title;
        }
    },

    applyBottomBar: function(bottomBar) {
        if (bottomBar && bottomBar.enabled) {
            if (!this.bottomBar) {
                return Ext.create('My.own.WindowBottomBar', bottomBar);
            }
            else {
                this.bottomBar.setConfig(bottomBar);
            }
        }
    }
});

クライアント側コードは以下。

var myWindow = Ext.create('My.own.Window', {
    //デフォルト値を一部上書き。configと同じ構造のオブジェクトを渡すんだね。
    title: 'Hello World',
    bottomBar: {
        height: 60
    }
});

alert(myWindow.getTitle()); // alerts "Hello World"

myWindow.setTitle('Something New');

alert(myWindow.getTitle()); // alerts "Something New"

myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"

myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 100