扩展类的多个实例的 ExtJS 继承问题答案

【问题标题】：ExtJS inheritance issue with multiple instances of an extending class扩展类的多个实例的 ExtJS 继承问题
【发布时间】：2020-06-16 23:48:11
【问题描述】：

我有多个表单，它们都以相同的“通用”字段开头，然后根据表单具有不同的字段。因此，我有一个父表单，所有子表单都从中扩展。父表单添加了通用字段，因此我不必在子表单中重新声明这些字段。

我遇到的问题是，当我有同一个子表单的多个实例时，会为每个实例重新添加这些通用字段。可能听起来有点令人困惑，但我认为下面的小提琴应该很清楚：https://fiddle.sencha.com/#fiddle/36lu&view/editor。显然我做错了，所以只是想弄清楚我做错了什么。

父/子类的代码：

Ext.define('TestParentForm', {
    extend: 'Ext.form.Panel',
    xtype: 'testparentform',

    initComponent: function(){
        var me = this;

        if(!me.items){
            me.items = [];
        }

        Ext.Array.insert(me.items, 0, [
            {
                xtype: 'textfield',
                fieldLabel: 'Universal Parent Field'
            }
        ]);

        me.callParent(arguments);
    }
});


Ext.define('TestChildForm', {
    extend: 'TestParentForm',
    xtype: 'testchildform',
    items: [
        {
            xtype: 'textfield',
            fieldLabel: 'Child-specific Field'
        }
    ]
});

【问题讨论】：

标签： inheritance extjs extjs7

【解决方案1】：

您可以使用 Ext.Array.merge(arr0, arr1..) 方法。

Ext.define('TestParentForm', {
extend: 'Ext.form.Panel',
xtype: 'testparentform',
initComponent: function () {

    this.items = Ext.Array.merge(
        [{
            xtype: 'textfield',
            fieldLabel: 'Universal Parent Field'
        }],
        this.items
    );

    this.callParent(arguments);
}
});

https://fiddle.sencha.com/#fiddle/36lv&view/editor

【讨论】：

在父表单中合并它有什么意义，尤其是在以前从未设置过this.items 的情况下？如果这将是子表单之一，那么这似乎可行。
我在 callParent 之后添加了没有任何字段和 console.log-ed items 属性的第三个孩子。再看看小提琴。如您所见，即使之前未定义 this.items，items 属性 (Ext.util.ItemCollection) 也不包含 null 或 undefined 值。这意味着不需要检查之前是否定义了项目。你的想法也不错，但我个人更喜欢 Ext.form.FieldSet 或 FieldContainer，避免在面板中放子面板。

【解决方案2】：

正确的做法可能不是inheritance，而是使用这些默认字段定义一个Panel，然后将其添加为子表单的最顶层；这也可以通过xtype 完成。但老实说，对于两个简单的文本字段，为了简单起见，我什至不会乱来（嵌套这么小的位不会提高可读性）。如果它会是更多的项目并且更复杂一点，那么嵌套它可能会是一件事。如果主窗体有例如，在这种情况下使用继承会更有意义。子表单也使用自定义验证方法 - 但正如小提琴所示，当它具有 UI 组件时，它的行为与扩展类时的行为相同。提示：ExtJS 可以很容易地将表单绑定到模型，这可能会减少所需的代码量。

【讨论】：

【解决方案3】：

我通过使用 initComponent 函数在子类中定义项目来解决此问题。在这里看小提琴：https://fiddle.sencha.com/#fiddle/36nn&view/editor

Ext.define('TestParentForm', {
    extend: 'Ext.form.Panel',
    xtype: 'testparentform',

    initComponent: function(){
        var me = this;

        if(!me.items){
            me.items = [];
        }

        Ext.Array.insert(me.items, 0, [
            {
                xtype: 'textfield',
                fieldLabel: 'Universal Parent Field'
            }
        ]);

        me.callParent(arguments);
    }
});


Ext.define('TestChildForm', {
    extend: 'TestParentForm',
    xtype: 'testchildform',

    initComponent: function(){
        var me = this;

        me.items = [{
            xtype: 'textfield',
            fieldLabel: 'Child-specific Field'
        }];

        me.callParent(arguments);
    }
});

【讨论】：