CODEWITHSUNDEEP
extjs
assembler
assembler

Reputation: 3302

extjs how to use two or more different instances of a custom component in the same view

I am very new to Extjs and I have built this component:

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);
    }
});

This was the way I found in order to set a different id to the component and its children.

Then I want to make two instances of this component in a another view, like this:

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'                                        })
],
...

The thing is no matter what component I click on the Go button it will print in the browsers console Result comp2. The mycomponent is behaving like a singleton. That is why I used new mycomponent({... in order to see if this way a new instance of the component was created, unsuccessfully. How can I get this working without dying in the try?

Exjs 6.x by the way...

Upvotes: 0

Views: 360

Answers (1)

Matheus Hatje
Matheus Hatje

Reputation: 987

Every object inside item's array is a new instance of the corresponding component, using your code as an example you can do something like this to pass different properties to every component.

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

}]

Checkout the Fiddle and see a working exemple

Upvotes: 1

Related Questions