CODEWITHSUNDEEP
javascriptinheritanceextjs4
balkon_smoke
balkon_smoke

Reputation: 1196

ExtJs 4: Using two copies of same component in one form

Would like to ask your help in understanding how ExtJs4 extends components and solve the problem below.

I created custom ItemSelector component by extending Ext.data.Grid, which have _aSelectedItems property.

Ext.define("Ext.ux.ItemSelector", {
    extend: "Ext.grid.Panel",

    // @type {Array}
    _aSelectedItems: [],
    ...
    getSelectedItems: function() {
        return this._aSelectedItems;
    },
});

Components

After that I've created two components which use ItemSelector widget as an item:

Ext.define("components.Devices", {
    extend: "Ext.form.FieldContainer",
    _oDevicesSelector: null,
    ...
    _getSelector: function(oConfig) {
        if (!this._oDevicesSelector) {
            this._oDevicesSelector = new Ext.ux.ItemSelector({
                id: oConfig.id,
                name: oConfig.name,
                flex: 1,
                storeUrl: oConfig.storeUrl
            });
        }
        return this._oDevicesSelector;
    },

    getValue: function() {
        return this._getSelector().getSelectedItems();
    }
});

and

Ext.define("components.Firmwares", {
    extend: "Ext.form.FieldContainer",
    _oFirmwaresSelector: null,
    ...
    _getFirmwareSelector: function(oConfig) {
        if (!this._oFirmwaresSelector) {
            this._oFirmwaresSelector = new Ext.ux.ItemSelector({
                id: oConfig.id,
                name: oConfig.name,
                flex: 1,
                storeUrl: oConfig.storeUrl
            });
        }
        return this._oFirmwaresSelector;
    },

    getValue: function() {
        return this._getFirmwareSelector().getSelectedItems();
    }
});

In each of components above I create new instance of ItemSelector through new.

Form

I create a form, and push components.Firmwares and components.Devices into it. All work properly, items load correctly.

Issue

When I select some items in components.Devices and call getValue() I get next results:

console.log( this.getDevicesSelector().getValue() );
// ["7885"] - it's OK

console.log( this.getFirmwaresSelector().getValue() );
// ["7885"] - but this array should be empty, 
// 'cause I didn't select any items in components.Firmwares selector

Can anyone help me to understand such behavior and how to fix it?

Really thanks in advance for the help.

Upvotes: 1

Views: 856

Answers (1)

Izhaki
Izhaki

Reputation: 23586

When extending components/classes, non-primitive types (like your _aSelectedItems array) are shared between all class instances.

The full explanation for why this odd thing happens can be found in this Skirtle's Den article. You may also want to have a look at this SO question, and note my comment to Molecular Man's answer.

If you put your array within initComponent your issue should be gone.

Upvotes: 2

Related Questions