Uncaught Ext.AbstractManager.register(): Registeri

Question

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(): Registering duplicate id "73" with this manager

---

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

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

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.

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.

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

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