Question

在定义1个面板时我有一个问题。

Ex1：

Ext.define('AppTest.view.AppMain', {
extend: 'Ext.panel.Panel',
xFile: "File",
    // Init
    initComponent: function () {
        Ext.apply(this, {
            items: [ 
                {
                    xtype: 'button',
                    action: 'file',
                    text: this.xFile // Using variable here
                }
            ]
        });
        this.callParent();
    }
});

练习2：

Ext.define('AppTest.view.AppMain', {
    extend: 'Ext.panel.Panel',

    xFile: "File",
    items: [ 
        {
            xtype: 'button',
            action: 'file',
            text: this.xFile // Using variable at here
        }
    ]
});

当我运行第二个例子时，只有例子1创建“文件”是按钮的文本，而例子2只是创建按钮，但“文件”不是按钮的文本。

请帮助我解释define的两种方式之间的区别，以及如何使用示例2仍然使用this.xFile。

Answer 1

这是因为 javascript关闭。在第一个示例中，this关键字指的是已定义的对象。（这是你的类实例）。简单来说，你应该找到最接近的函数包装器（这里是initComponent）。

但在第二个示例中，this引用了window对象，它没有xFile属性。所以它返回null。对于测试，将以下行放在第二个示例的顶部，并查看结果：

this.xFile = 'hello!';

最后，我强烈建议您在编写复杂脚本之前在javascript中阅读有关closures和prototypes的部门。

定义不使用initComponent ExtJs时如何使用变量

1 个答案: