Extjs 外部定义混乱
我遇到了一个问题,这让我觉得我可能有点误解了ExtJS类架构的使用。下面是一个简化版本的示例,演示了该问题Extjs 外部定义混乱,extjs,Extjs,我遇到了一个问题,这让我觉得我可能有点误解了ExtJS类架构的使用。下面是一个简化版本的示例,演示了该问题 Ext.define('Person', { name : 'Default', inventory : [], addInventoryItem : function(item) { Ext.Array.push(this.inventory, item);
Ext.define('Person', {
name : 'Default',
inventory : [],
addInventoryItem : function(item) {
Ext.Array.push(this.inventory, item);
},
inventoryList : function() {
console.log("Inventory: " + JSON.stringify(this.inventory));
},
setName : function(name) {
this.name = "name";
}
});
Ext.define('Student', {
extend : 'Person'
});
alex = Ext.create('Student');
alex.setName("Alex");
alex.addInventoryItem("Knifes");
alex.inventoryList();
david = Ext.create('Student');
david.setName("David");
david.addInventoryItem("Forks");
david.inventoryList();
输出:
Inventory: ["Knifes"]
Inventory: ["Knifes","Forks"]
预期产出:
Inventory: ["Knifes"]
Inventory: ["Forks"]
如果重写该类,我会预期实际结果,但无法理解为什么我的第二个实例会影响超类,并反过来反映我的第一个实例所做的更改。问题是,在类的所有实例之间共享一个
库存
数组。在定义类时创建一次数组,然后每个实例只获得对该数组的引用
基本上,您需要在创建时为每个Person
实例提供自己的清单数组,如下所示:
Ext.define('Person', {
...
constructor: function() {
this.inventory = [];
},
...
});
+1但在扩展预定义的extjs组件(例如面板)时,请小心使用构造函数。要向扩展组件添加属性和行为,建议使用initComponent方法,而不是构造函数。感谢Rob和dbrin,这就是关键:)我更喜欢在构造函数中使用明智的
callParent(arguments)
,这样我就知道实例一经创建就正确初始化了