Extjs, как использовать два или более разных экземпляров пользовательского компонента в одном представлении

Question

Я очень плохо знаком с Extjs и создал этот компонент:

var extra = '';

Ext.define('mycomponent', {
    extend: 'Ext.container.Container',
    id: 'mycomp',
    alias: 'widget.newComponent',
    xtype: 'mycomp',

    layout: {
        type: 'hbox'
    },
    items: [
        {
            xtype: 'combobox',
            publishes: 'value',
            displayField: 'name',
            valueField: 'key',
            queryMode: 'local',
            lastQuery: '',
            anyMatch: true,
            anchor: '-15',
            minChars: 0,
            typeAhead: true,
            triggerAction: 'all',
            selectOnFocus: true,
            typeAheadDelay: 100,
            labelWidth: 100,
            labelAlign: 'right',
            pageSize: 0,
            clearFilterOnBlur: true,
            defaultValue: 0,
            matchFieldWidth: false,
            allowBlank: true,
            forceSelection: true,
            editable: true,
            enableKeyEvents: true
        },
        {
            xtype: 'button',
            text: 'Go',
            listeners: {
                click: function(item, e, eOpts) {
                   console.log('Result', extra);
                }
            }
        }
    ],

    initComponent: function () {
        var that = this;
        extra = that.extra;
        this.id += that.extra;
        this.xtype += that.extra;

        this.items[0].id = 'mycombo' + that.extra;
        this.items[0].alias = 'mycombo' + that.extra;
        this.items[1].id = 'btn' + that.extra;

        this.callParent(arguments);
    }
});

Это был способ, который я нашел, чтобы установить другой идентификаторк компоненту и его дочерним элементам.

Затем я хочу сделать два экземпляра этого компонента в другом представлении, например:

Ext.define('myView', {
    extend: 'Ext.window.Window',
    id: 'myView',
    xtype: 'myView',

    modal: true,
    bodyPadding: 10,
    height: 520,
    width: 575,
    closeAction: 'destroy',
    resizable: false,

    items: [
        {
            xtype: 'label',
            text: 'My test:'
        },
        new mycomponent({
                                            xtype: 'mycomp',
                                            extra: 'comp1'
                                        }),
                                        new mycomponent({
                                            xtype: 'mycomp',
                                            extra: 'comp2'                                        })
],
...

Дело не в том, на каком компоненте я нажимаюкнопка Go будет печататься в консоли браузера Result comp2.mycomponent ведет себя как одиночка.Вот почему я использовал new mycomponent({..., чтобы увидеть, если таким образом был создан новый экземпляр компонента, безуспешно.Как я могу заставить это работать, не умирая при попытке?

Кстати, 6.x Exxs ...

Answer 1

Каждый объект в массиве элемента является новым экземпляром соответствующего компонента, используя ваш код в качестве примера, вы можете сделать что-то подобное для передачи различных свойств каждому компоненту.

items: [{
    xtype: 'mycomp',
    id: 'id1',
    extra: 'extraValueA'
}, {
    xtype: 'mycomp',
    id: 'id2',
    extra: 'extraValueB'

}]

Оформить заказ Скрипка и посмотреть рабочий пример