Question

我创建了一个小提琴，目的只是为了模拟类属性在窗口销毁时不重置的问题。
测试方法：打开小提琴，按OPEN按钮，添加3个面板，关闭外部窗口，再次按OPEN按钮，然后添加更多面板。
面板编号表示窗口中_panels数组属性的长度。
现在解决问题。
如您所见，添加新面板时面板号未重置。因此，如果添加3个面板并关闭窗口，请重新打开窗口面板，计数分别为3、4、5，而不是0 1 2 ...
我的问题是，为什么？

Fiddle example

亲切的问候

阿曼多

编辑：这样一来，您可以看到解决方案
我结束了我的应用程序的修复，使其像这样fiddle。我将属性移到了构造函数。

constructor: function() {
    Ext.apply(this, {     
        width: 800,      
        height: 600, 
        layout: 'vbox', 
        _panels : []
    }); 
    this.callParent(arguments); 
},

Answer 1

一个简单的答案就是原型继承（请参阅this MDN文章）。基本上，您的非基本体将继承到新实例，因为它们存在于您的原型类中，并且由于它们是非基本体，因此使用的是相同的引用。要解决此问题，我建议将_panels变量包装在config块中，如下所示，并鼓励您使用适当的set / get方法，而不是直接访问它：

config: {
    _panels : []
}

Answer 2

定义时

Ext.define('TestWindow', {
    extend: 'Ext.window.Window',
    _panel: []
});

TestWindow定义类获取空数组属性（无原始数据类型）。当您通过var win = Ext.create('TestWindow')创建实例时，该实例将获得该属性。但是，设置时：

   onDestroy: function() {
      this._panels = [];
    },

它将空数组设置为实例_panels的属性win，而不是定义类TestWindow上的空数组； TestWindow保留现有的变异_panel。下次创建新实例时，它会从类定义中获得相同的_panel。

我了解您出于演示目的这样做是为了显示问题。但是，我更喜欢让框架进行所有繁重的工作（创建和销毁等）：

Ext.define('TestWindow', {
    extend: 'Ext.window.Window',

    width: 800,
    height: 600,

    defaultListenerScope: true,
    layout: 'vbox',

    initComponent: function() {
        this._panels = [];
        this.callParent(arguments);
    },

    addPanel: function() {
        console.log(this._panels.length);
        
        var panels = this._panels;
        panels.push(this.add({
            xtype: 'panel',
            title: 'Panel ' + panels.length,
            height: 50,
            width: '100%'
        }));
    },
    
    tbar: [{
        xtype : 'button',
        text: 'add',
        handler: 'addPanel'
    }]

});

Answer 3

如果前一个答案中的原型行为是“功能/故意的不良代码/遗留代码导致了意想不到的后果”，则小于正确答案

在面板实例化后，

手动覆盖原型值

EXTJS 6.7-销毁时不会清除类属性

3 个答案: