复合组件

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 的组件中的任何代码。

如何处理？我们真的希望能够重用一些复杂的复合组件，这样我们的设计人员就不必一直手动编写代码，并且让组件作为一个独立的单元来保存和检索数据，例如@987654339 @ 拉出数据，对复合组件一无所知。

非常感谢这个问题的解决方案。

关于 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'
    }
]