2

私はExtjsのクラスを拡張することを改善しようとしていますが、私の進化は私をこの問題に導きました:

私はExt.Panelを拡張しました。私の拡張機能には、デフォルトでボタンが 1 つ付いた下部ツールバーが必要です。

myPanel = Ext.extend(Ext.Panel, {
    method: function () {
        return 'response!';
    },

    bbar: new Ext.Toolbar({
        items:
        [
            {
                xtype: 'button',
                text: 'Hit me!',
                handler: function (button, event) {
                    alert(this.method());
                },
                scope: this
            }
        ]
    })
});

私がまだ学んでいないのは、これが許可されていない理由です。this私の拡張パネルではなく、グローバルスコープを指しています-したがって、ハンドラー関数内にあります.method()。undefined

4

2 に答える 2

7

特定のオブジェクトではなく、プロトタイプで bbar を定義しています。

initComponent をオーバーライドし、bbar 定義をその中に移動します。

myPanel = Ext.extend(Ext.Panel, {
    method: function () {
        return 'response!';
    },

    initComponent: function() {    
        var bbar = new Ext.Toolbar({
            items:
            [
                {
                    xtype: 'button',
                    text: 'Hit me!',
                    handler: function (button, event) {
                        alert(this.method());
                    },
                    scope: this
                }
            ]
        });

        // Config object has already been applied to 'this' so properties can 
        // be overriden here or new properties (e.g. items, tools, buttons) 
        // can be added, eg:
        Ext.apply(this, {
            bbar: bbar
        });

        // Call parent (required)
        myPanel.superclass.initComponent.apply(this, arguments);

        // After parent code
        // e.g. install event handlers on rendered component
    }
});

コンポーネントを拡張するときに使用できるテンプレートについては、http://www.sencha.com/learn/Manual: Component:Extending_Ext_Components を参照してください。

于 2010-06-30T14:34:55.960 に答える
1

配列の最初の要素である匿名オブジェクトは、実行されるitemsスコープと同じスコープで作成されることに注意してExt.extend(...ください。

あなたがこれを持っていたら：

var o = { 'a': a, 'b': b, scope: this };

、 、およびは、現在のスコープ内のo.a、、および と同じ値を持つo.bと予想されます。ここでは、オブジェクトを作成しながら配列を作成している場合など、オブジェクトを作成しているため、もう少し複雑ですが、理由は同じです。o.scopeabthis

代わりにすべきことはthis.bbar、コンストラクター内で定義することです。

myPanel = Ext.extend(Ext.Panel, {
    method: function () {
        return 'response!';
    },

    constructor: function(config) {
        this.bbar = new Ext.Toolbar({
            items:
            [
                {
                    xtype: 'button',
                    text: 'Hit me!',
                    handler: function (button, event) {
                        alert(this.method());
                    },
                    scope: this
                }
            ]
        });

        myPanel.superclass.constructor.apply(this, arguments);
    }
});
于 2010-06-30T14:36:30.590 に答える