initConfig を実行したのに、getter が使えない？

[shobuno]

良くわからない現象が発生してしまいました。
どなたかご存知でしたらご教授ください。


この「Sencha-Ext-JS-4実践開発ガイド(5章クラスシステム　5.5.3コンフィグ)」を参考に、
新規クラスを作成してし、使用を考えておりますが、
表題のように getter/setter の動作が思い通りにならず困っております。

作成したクラス：

Ext.define('Imag', {
    extend: 'Ext.Component',

    config : {
        fileName : '', 
        x : 0, 
        y : 0, 
        height : 0,
        width : 0
    },

    /**
     * コンストラクタ
     *
     * @cfg fileName 表示する画像ファイルパス
     * @cfg width 画像の横幅
     * @cfg height 画像の縦高さ
     */
    constructor : function(config) {
        var me = this;
        // スーパークラスを呼び出す(引数は同じものを渡す)
        me.callParent(arguments);
        me.initConfig(config);
        me.x = 10;
    },
    // その他いろいろなメソッド
});

呼び出し元：

 tmp = new Imag({ fileName : fileName,
                     height : 600,
                     width : 200,
                     x : 30,
                     y : 50
                  });

console.log(tmp);  // オブジェクト表示
console.log(tmp.x);       // 10
console.log(tmp.getX());  // 10
console.log(tmp.y);       // 50
console.log(tmp.getY());  // 50
console.log(tmp.width);        // 200
//console.log(tmp.getWidth());   // this.el is undefined エラーのため表示されず
console.log(tmp.height);        // 600
//console.log(tmp.getHeight());   // this.el is undefined エラーのため表示されず

console.log(tmp.setWidth(9999));  // 9999を設定
console.log(tmp.width);           // 9999
console.log(tmp.setHeight(8888)); // 8888
console.log(tmp.height);          // 8888

呼び出し元で、コンソールログを出力しておりますが、
「getWidth()」と、「getHeight()」を使用するとエラーが発生します。
また、「setWidth(9999)」と、「setHeight(8888)」は正しく設定されました。

"height" を "heighta" など名称を変更し、すべて対応させると、"getter/setter"が使用できました。


名称を変更せず、「getWidth()」と、「getHeight()」を使用する方法はないでしょうか。
使用できないと、参照方法が2種類混在してしまい、混乱の元になってしまいます。

どなたかご教授願います。
(これって…)


バージョン：ext-4.0.7/ext-all.js
ブラウザ：FireFox(FireBug を使用して確認)

[mashiki]

マニュアルに以下のようにあります。
http://docs.sencha.com/ext-js/4-0/#!/guide/class_system
2. Configuration
：
Getter and setter, methods for every config property are automatically generated into the class' prototype during class creation if the class does not have these methods already defined.

で、継承元のComponentは
http://docs.sencha.com/ext-js/4-0/#!...ethod-getWidth
が定義されていますね。

    /**
     * Gets the current width of the component's underlying element.
     * @return {Number}
     */
    getWidth : function() {
        return this.el.getWidth();
    },

[shobuno]

mashiki 様

ご返信ありがとうございます。


簡単に言うと、

「存在していないコンフィグは自動生成するけど、
　存在しているコンフィグは自動生成しないよ…」

ということですね。
Javaっぽくなったのになぁ…残念です。

でも、「width」と「height」って、getter/setter の参照先が違うんですね。
なぜ違うのでしょう…私には難しいです…

    setWidth : function(width) {
        return this.setSize(width);
    },

そうなると、解決策としては、継承をやめるか、「getWidth()」と、「getHeight()」を独自実装するしかないのですね…
あ、setterも作らないと、混乱の元か…

次の、Ver：4.1　に期待…してもこれは直らないんだろうなぁ…


とりあえず対応策が判ったので、考えて見ます。

ご回答ありがとうございました。



P.S.
この入力フォームって、ペーストするとカーソルの位置にペーストされないから嫌ですね…(笑
Operaだからかな…？

[tenri-u]

これはクラスシステムの問題ではなく、Ext.Compornentクラスを継承する際の話という
考え方の方がいいんじゃないでしょうか。

| 次の、Ver：4.1　に期待…してもこれは直らないんだろうなぁ…

親クラスにはgetWidthがあるんですから、その動作を変更するんだったら
getWidthをオーバーライドする。これは当然じゃないでしょうか。
だから将来も変わらないと思いますよ。

[shobuno]

親クラスにはgetWidthがあるんですから、その動作を変更するんだったら
getWidthをオーバーライドする。これは当然じゃないでしょうか。
だから将来も変わらないと思いますよ。

確かにその通りだと思います。

ただ、「config に設定した変数の「getter/setter」 を自動生成してくれる。」
と考えると、勝手にオーバライドしてくれても良いじゃん…

と思いました。
(まぁ、親クラスのconfigを同一名で隠蔽してる時点で設計ミスですが…)


また、「setter は自分のconfigに値を設定してくれるのに、getter は動作すらしてくれない。」
というのが嫌だなぁ…


というぐらいです。

私の考えている内容が逆に使いづらくする可能性もありますし、個人的要望です。
(実際に変更された後、私自身が使いづらいと言いだす可能性も否定できず…(笑))