dom exception 8 when i try to istantiate again a new carousel

[and cop]

Hi all,
i define the carosuel this way :

Ext.define('HelloWorld.Modella1', {
extend: 'Ext.Carousel',
cls: 'carmod1',
alias: 'widget.modella1',
initialize: function() {
this.add([{
xtype: 'toolbar',
docked: 'top',
title: 'Models',
items: backButton
},
{
html: '<img src="resources/stockings/models/img01.jpg" />'
},
{
html: '<img src="resources/stockings/models/img02.jpg" />'
}
......

this is the handler of the back button which destroy the carousel:

if(Ext.ComponentQuery.query('modella1')[0])
Ext.Vievport.remove(Ext.ComponentQuery.query('modella1')[0], true);

then if(!Ext.ComponentQuery.query('modella1')[0]){
Ext.Viewport.add(new HelloWorld.Modella1().show());
}
else {
Ext.ComponentQuery.query('modella1')[0].show();
}


the first time it's ok and a new istance of Modella is correctly displayed .
Pressing the back button it is correctly destroyed but when i try the second new HelloWorld.Modella1() i get the dom error.
I've tried different solutions but i cant find a solution to create a new istance of the same carosuel when previously destroyed (i had a similar problem with sencha touch 1, i solved the problem putting the all configs in the init function).
Thanks in advance.

[mitchellsimoens]

When you remove a component, it is destroyed. You can do one of two things... create a new carousel instance every time you try to add it or set autoDestroy to false on the carousel.

[and cop]

Hi Mitchell,
thank you for the response.
I would like to create a new instance but as soon as i destroy the first a cant create a new one.
Eg.
Ext.Viewport.add(HelloWorld.Modella1().show) // first time ok
Ext.Viewport.remove(Ext.ComponentQuery.query('modella1')) //destoyed ok, there's a listener on destroy event
Ext.Viewport.add(HelloWorld.Modella1().show) // Error with Dom exception 8
I've also tried getCmp() with the id of the carousel but still nothing.
Bye

[mitchellsimoens]

What is HelloWorld.Modella1?

[and cop]

It is a carousel class :

var my model = new HelloWorld.Modella1(); // it's ok


Ext.define('HelloWorld.Modella1', {
extend: 'Ext.Carousel',
cls: 'carmod1',
alias: 'widget.modella1',
initialize: function() {
this.add([{
xtype: 'toolbar',
docked: 'top',
title: 'Models',
items: backButton
},
{
html: '<img src="resources/stockings/models/img01.jpg" />'
},
{
html: '<img src="resources/stockings/models/img02.jpg" />'
}
etc

[mitchellsimoens]

Ok, then this:

Ext.Viewport.add(HelloWorld.Modella1().show);

should be:

Ext.Viewport.add(new HelloWorld.Modella1());

[and cop]

Sorry, i made a typo in the last reply, my bad, in the first post i wrote it correctly:
Ext.Viewport.add(new HelloWorld.Modella1()) // this gives the error the second time it is executed
If the problem is not clear i could post a test case extracting the code from the context.
Thank you

[mitchellsimoens]

Is there something in the HelloWorld.Modella1 class that is being created outside the class?

[and cop]

This is the class (i deleted listeners and some items and still get the error) im trying with :



Ext.define('HelloWorld.Modella1', {
extend: 'Ext.Carousel',
id: 'modella1',
initialize: function() {
this.add([{
xtype: 'toolbar',
docked: 'top',
title: 'Models',
items: backButton
},
{
html: '<img src="resources/stockings/models/lehotska/01.jpg" />'
},
{
html: '<img src="resources/stockings/models/lehotska/02.jpg" />'
}
]);
this.callParent();
}


});

[and cop]

Thank you Mitchell !
I was creating the back button outside carousel, i just moved it inside initialize function and now the class works as intended.