Композитные компоненты

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, могут испортить любой код.

Как с этим справиться?Нам бы очень хотелось иметь возможность повторно использовать некоторые сложные составные компоненты, чтобы нашим дизайнерам не приходилось постоянно их кодировать, а компонент работал как независимый модуль для сохранения и извлечения данных, например, form.getValues() извлекает данные, ничего не зная о составном компоненте.

Буду очень признателен за решение этой проблемы.

Относительно возможного дубликата, предложенного Кодерино Хаварино : Этовопрос не является дубликатом этого.Этот компонент может работать, используя одно значение для обоих полей, то есть поле даты интерпретирует значение как дату, поле времени интерпретирует значение как время.Фактически это всего лишь один компонент с пользовательским типом отображения.

Answer 1

Вот рекомендуемый способ достижения того, что вы хотите

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

Answer 2

Заполнение именованных полей запрошенным способом является простой задачей:

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 не используется, тогда это решение должно дать ожидаемый результат.