Uncaught Ext.AbstractManager.register（）：註冊重複的ID

Question

在下面的應用程序中，我試圖將id的動態添加到生成的項目中。我的代碼工作正常，但是當我在其中添加下面的兩條評論線。它拋出錯誤

未捕獲Ext.AbstractManager.register（）：註冊副本ID「73」這個經理

---

當我試圖找出錯誤的根源，我發現，代碼工作正常，直到執行81 id（console.log(_idGen)）。由此可見，該錯誤與超出範圍的異常有關。 （9 * 9 = 81）也只在小提琴，當我添加HTML文本到子面板，我才知道，他們之間的73 to 81 ??（而不是1 to 81）這是困惑我，如何？

FIDDLE

Ext.onReady(function(){ 
    var _idGen = 1; 
    var childItems = [], items = []; 

    for (var i = 0; i < 9; i++) { 
    childItems.length = 0; 
    for (var j = 0; j < 9; j++) { 
     childItems.push({ 
      xtype: 'panel', 
/****************************/ 
      id: _idGen, 
      html: _idGen + "", 
/****************************/ 
      width: 50, 
      height: 50, 
      style: {borderWidth: '1px'} 
     }); 
     console.log(_idGen); 
/*****************************/ 
     _idGen++; 
/*****************************/ 
    } 
    items.push({ 
     xtype: 'panel', 
     layout: { 
      type: 'table', 
      columns: 3 
     }, 

     items: childItems 
    }); 
    } 
    Ext.create('Ext.container.Container', { 
    layout: { 
     type: 'table', 
     // The total column count must be specified here 
     columns: 3 
    }, 
    renderTo: Ext.getBody(),  
    style: {width: '455px',marginLeft: 'auto',marginRight: 'auto', marginTop: '30px'}, 
    items: items 
    }); 

}); 

Answer 1

不要創建標識的你，如果沒有嚴格要求贏了！

它會一直是錯誤的來源，所以當框架已經照顧時，爲什麼要打擾自己。

使用自定義標識屬性或更好，框架itemId已經支持的屬性。該屬性只需在每個組件級別內是唯一的。您也可以使用getComponent('your-item-id')方法來接收嵌套到調用的組件中的組件。

我已經修改了你的榜樣使用itemId's並提供你在底部

演示查詢見JSFiddle

var _idGen = 1, 
     _outerIdGen = 1; 
    var childItems = [], items = []; 

    for (var i = 0; i < 9; i++) { 
    // You will keep the same array with and just alter all instances each time. 
    // This is what causes all your problems and the duplicates!  
    // childItems.length = 0; 
    // But you need a new array each time 
    childItems = []; 
    for (var j = 0; j < 9; j++) { 
     childItems.push({ 
      xtype: 'panel', 
      itemId: 'inner-'+_idGen++, 
      html: _idGen + "", 
      width: 50, 
      height: 50, 
      style: {margin: '1px',borderColor: 'white',backgroundColor:'cornflowerblue'} 
     }); 
    } 
    items.push({ 
     xtype: 'panel', 
     layout: { 
      type: 'table', 
      columns: 3 
     }, 
     itemId: 'outer-'+_outerIdGen++, 
     items: childItems 
    }); 
    } 
    Ext.create('Ext.container.Container', { 
    layout: { 
     type: 'table', 
     // The total column count must be specified here 
     columns: 3 
    }, 
    renderTo: Ext.getBody(),  
    style: {width: '455px',marginLeft: 'auto',marginRight: 'auto', marginTop: '30px'}, 
    items: items 
    }); 
    console.log(Ext.ComponentQuery.query('container > panel[itemId=outer-1] > panel[itemId=inner-73]')[0]);