Uncaught Ext.AbstractManager.register(): Registering duplicate id

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

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