Uncaught Ext.AbstractManager.register（）：注册重复的id [英] Uncaught Ext.AbstractManager.register(): Registering duplicate id

问题描述

在下面的应用程序中，我正在尝试向动态生成的项添加 id 。我的代码工作正常，但是当我添加下面两个注释行时。它引发错误

In the application below, I am trying to add id's to the generated items dynamically. My code works fine but when I add the below two commented lines in it. It throws error

Uncaught Ext.AbstractManager.register（）：在此管理器中注册重复的id73

Uncaught Ext.AbstractManager.register(): Registering duplicate id "73" with this manager

---

当我试图找出错误的根源时，我发现代码正常工作，直到执行 81 id's（ console.log（_idGen））。由此可以看出，错误与超出范围的异常有关。 （9 * 9 = 81），还有 仅在小提琴 中，当我向小组面板添加HTML文本时，我知道他们在 73到81 ??（而不是 1到81 ）这让我感到困惑，怎么样？

---

When I tried to find out the source of error, I found that the code is working fine till the execution of 81 id's (console.log(_idGen)). From this, it is clear that the error is related to out of range exception. (9*9 = 81) and also only in Fiddle, when I add HTML text to the child panels, I came to know that they are between 73 to 81??(instead of 1 to 81) which is confusing me, how?

FIDDLE

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

});

推荐答案

如果不严格，不要创建Id需要！

Don't create Id's by your won if not strictly required!

它始终是一个错误的根源，所以为什么在框架已经关注的时候呢？

It will always be a source of errors so why bother yourself with that when the framework already take care.

使用自定义标识符属性或更好的框架 itemId 已经支持的属性。该属性只需要在每个组件级别中是唯一的。您还可以使用 getComponent（'your-item-id'）方法来接收嵌入到调用的组件。

Use custom identifier properties or better, the one that is already supported by the framework itemId. This property need only to be unique within each component level. You can also use the getComponent('your-item-id') method to receive a component that is nested into the calling one.

我修改了你的例子，使用 itemId的，并在底部提供演示查询

I've modified your example to use itemId's and provided you demo query at the bottom

请参阅 JSFiddle

See 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]);

这篇关于Uncaught Ext.AbstractManager.register（）：注册重复的id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！