Question

想请求您帮助理解ExtJs4如何扩展组件并解决下面的问题。

我通过扩展具有ItemSelector属性的Ext.data.Grid来创建自定义_aSelectedItems组件。

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

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

零件

之后我创建了两个使用ItemSelector小部件作为项目的组件：

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

和

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

在上面的每个组件中，我创建了ItemSelector到new的新实例。

表格

我创建了一个表单，然后将components.Firmwares和components.Devices推入其中。一切正常，项目加载正确。

问题

当我在components.Devices中选择一些项目并致电getValue()时，我会得到下一个结果：

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

任何人都可以帮助我理解这种行为以及如何解决这个问题吗？

非常感谢您的帮助。

Answer 1

扩展组件/类时，非基本类型（如_aSelectedItems数组）在所有类实例之间共享。

可以在this Skirtle's Den article中找到有关奇怪事情发生原因的完整解释。您可能还想查看this SO question，并注意我对Molecular Man答案的评论。

如果您将数组放在initComponent之内，那么您的问题就应该消失了。

ExtJs 4：在一个表单中使用相同组件的两个副本

1 个答案: