javascript - 访问类内的私有(private)属性

Question

为什么以下代码不起作用(ExtJS V6)？

Ext.define('Test', {
extend: 'Ext.window.Window',
xtype: 'basic-window',

config: {
    mytitle: ''
},

constructor: function (config) {
    Ext.apply(this, config);
    this.callParent(config);
},

requires: [
           'Ext.form.Panel'
       ],

height: 300,
width: 400,
scope: this, 
title: 'title: ' + this.mytitle,
autoScroll: true,
autoShow: true,
bodyPadding: 10,
html: "Lorem ipsum",
constrain: true,
});

var t = Ext.create('Test', {mytitle: 'testtitle'});
t.show();

我希望这会将窗口的标题设置为“title:testtitle”。相反，它将标题设置为“标题:未定义”。

附加组件:如果我使用

...
title: 'title' + this.getMytitle(),
...

我收到“未捕获的类型错误:this.getMytitle 不是函数”。为什么？

Answer 1

第一个问题 当计算 title: 'title: ' + this.mytitle 时，this 并不指向您的类的实例。您应该从构造函数

中执行此操作

还有 对 callParent 的调用需要一个参数数组，始终调用 this.callParent(arguments)

会更容易

最后 您只能在调用构造函数后调用 this.getMytitle()。

参见https://fiddle.sencha.com/#fiddle/uh9

constructor: function(config) {
    this.callParent(arguments);
    this.setTitle( 'title: ' + this.getMytitle() )                      
},

<小时/>

关于配置响应正在设置的配置的正确方法

通过实现updateMytitle，只要有人调用setMytitle('title')，它也会起作用

https://fiddle.sencha.com/#fiddle/uha

Ext.define('Test', {
    extend: 'Ext.window.Window',
    xtype: 'basic-window',
    requires: ['Ext.form.Panel'],
    config: {
        mytitle: ''
    },

    updateMytitle: function(mytitle) {
        this.setTitle('title: ' + mytitle);        
    },