Question

我想创建一个将其他现有组件组合在一起的组件。下面是一个简化的示例：

Ext.define('CCC.ThreeNames', {
    extend: '???',
    alias: 'widget.threenames',
    items: [
        {
            xtype: 'textfield',
            label: 'First',
            itemId: 'first',
            name: 'first'
        },
        {
            xtype: 'textfield',
            label: 'Middle',
            itemId: 'middle',
            name: 'middle'
        },
        {
            xtype: 'textfield',
            label: 'Last',
            itemId: 'last',
            name: 'last'
        }
    ]
});

所以说我想使用它：

items: [
    {
        xtype: 'threenames',
        itemId: 'applicant',
        name: 'applicant'
    },
    {
        xtype: 'threenames',
        itemId: 'dependent',
        name: 'dependent'
    }
]

首先，我从???扩展什么？我在考虑xtype: 'fieldset'，但是这种类型不被认为是表单字段，因此当您通过getValues提取数据时，它会跳过该字段集并向下迭代到文本字段。文本字段不“知道”其上下文，因为该上下文位于父元素中，因此它们仅以first，middle和last的形式报告，现在，在数据集。

我在初始化过程中在考虑，也许父组件会修改name并在其前面加上自己的name，例如first，middle，last到applicant.first，applicant.middle，applicant.last等，但这将破坏组件中的所有代码使用name进行任何操作。

如何处理？我们非常希望能够重用一些复杂的复合组件，以使我们的设计人员不必一直手工编写它们，并使组件作为独立的单元来保存和检索数据，例如{{ 1}}提取数据，而对合成组件一无所知。

真的很感谢对此的解决方案。

关于Coderino Javarino建议的可能重复项：此问题不是该问题的重复项。该组件能够为两个字段使用单个值，即日期字段将值解释为日期，时间字段将值解释为时间。实际上，它实际上只是具有自定义显示类型的单个组件。

Answer 1

为请求字段命名的方法很简单：

Ext.define('CCC.ThreeNames', {
    extend: 'Ext.container.Container', //you can use Ext.form.Panel for additional functionality
    alias: 'widget.threenames',
    items: [
        { xtype: 'textfield', itemId: 'first', name: 'first', fieldLabel: 'First' },
        { xtype: 'textfield', itemId: 'middle', name: 'middle', fieldLabel: 'middle' },
        { xtype: 'textfield', itemId: 'last', name: 'last', fieldLabel: 'last' },
],
    listeners: {
        beforerender: function() {
            let self = this;
            this.query('textfield').forEach(function(field){
                field.name = self.name + '.' + field.name;
                field.itemId = field.name;
            });
        }
    }
});

使用这种命名是完全不同的事情。但是据我从您的评论中了解到，没有使用MVC模式，那么此解决方案应能获得预期的结果。

Answer 2

这是实现所需目标的推荐方法

Ext.define('CCC.ThreeNames', {
extend: '???',
**xtype: 'threenames',**
alias: 'widget.threenames',
items: [
    {
        xtype: 'textfield',
        label: 'First',
        itemId: 'first',
        name: 'first'
    },
    {
        xtype: 'textfield',
        label: 'Middle',
        itemId: 'middle',
        name: 'middle'
    },
    {
        xtype: 'textfield',
        label: 'Last',
        itemId: 'last',
        name: 'last'
    }
]});

现在您可以像这样使用它

items: [
    {
        xtype: 'threenames',
        itemId: 'applicant',
        name: 'applicant'
    },
    {
        xtype: 'threenames',
        itemId: 'dependent',
        name: 'dependent'
    }
]

复合组件

2 个答案: