0

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

我遇到的问题是，当我有同一个子表单的多个实例时，会为每个实例重新添加这些通用字段。可能听起来有点混乱，但我认为下面的小提琴应该很清楚：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'
        }
    ]
});
4

3 回答 3

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

于 2020-06-13T21:39:57.377 回答
1

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

于 2020-06-13T21:04:51.023 回答
0

我通过使用 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);
    }
});
于 2020-06-16T15:44:45.840 回答