Uncaught Ext.AbstractManager.register (): Registering a duplicate id
In the app below I am trying to add id
to the generated elements dynamically. My code works fine, but when I add two commented lines to it. This raises the error
Uncaught Ext.AbstractManager.register (): Register duplicate id "73" with this manager
When I tried to figure out the source of the error, I found that the code was working fine until 81
id ( console.log(_idGen)
) was executed . It is clear from this that the error is related to an out of range exception. (9 * 9 = 81) and also only in Fiddle , when I add HTML text to child panes, I found out that they are in between 73 to 81
?? (instead of 1 to 81
) what scares 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
});
});
source to share
Do not create an ID as a winner unless strictly required!
It will always be a source of bugs, so why bother with that when the framework already cares.
Use custom id properties or better, one that's already supported by the framework itemId
. This property should be unique for each component level only. You can also use a method getComponent('your-item-id')
to get a component that is nested in the caller.
I modified your example to use itemId's
and provide you with a demo request 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]);
source to share