扩展 class 的多个实例的 ExtJS 继承问题

Question

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

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

代码 parent/child 类:

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'
        }
    ]
});

Answer 1

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

Answer 2

您可以使用 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

Answer 3

我通过使用 initComponent 函数在子 class 中定义项目来解决这个问题。请参阅此处 fiddle：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);
    }
});

扩展 class 的多个实例的 ExtJS 继承问题

ExtJS inheritance issue with multiple instances of an extending class

inheritance

extjs

extjs7