代码之家 › 专栏 › 技术社区 › Chau

extjs如何在扩展时初始化新元素-而不丢失作用域

extend scope extjs

Chau · 技术社区 · 14 年前

我正在努力在扩展 EXTJS 我的进化导致了这个问题:

我已经延长了 外部面板 我希望我的扩展有一个底部工具栏,默认情况下只有一个按钮。

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 在handler函数内部。

2 回复 | 直到 14 年前

ob1 14 年前

您是在原型上定义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 对于扩展组件时可以使用的模板

Daniel Trebbien 14 年前

您必须记住,匿名对象是 items 数组的创建范围与 Ext.extend(... 执行。

如果你有这个:

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

你会预料到的 o.a , o.b 和 o.scope 值与 a , b 和 this 在当前范围内。这里,它有点复杂,因为您在创建对象的同时创建一个对象,而创建一个数组,等等,但是推理是相同的。

你应该做的是定义 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);
    }
});