extjs - Extjs扩展时如何初始化新元素-不失去范围

我试图在扩展Extjs的类方面做得更好，我的发展使我遇到了这个问题:

我已经扩展了一个Ext.Panel，并且我希望自己的扩展具有一个带有一个默认按钮的底部工具栏。

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。

最佳答案

您是在原型(prototype)而不是特定对象上定义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。