未捕获的 Ext.AbstractManager.register():注册重复 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

未捕获的 Ext.AbstractManager.register():向该管理器注册重复的 ID73"

当我试图找出错误的来源时，我发现代码运行良好，直到执行 81 id's (console.log(_idGen)).由此可知，该错误与超出范围异常有关.(9*9 = 81) 以及仅在 Fiddle 中，当我将 HTML 文本添加到子面板时，我开始知道它们介于 73 到81??(而不是 1 to 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?

小提琴

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's 并在底部为您提供演示查询

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

这篇关于未捕获的 Ext.AbstractManager.register():注册重复 ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！