Results 1 to 10 of 10

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

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    10
    Vote Rating
    0
      0  

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

    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.

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

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    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.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    10
    Vote Rating
    0
      0  

    Default

    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

  5. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    What is HelloWorld.Modella1?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    10
    Vote Rating
    0
      0  

    Default

    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

  7. #6
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    Ok, then this:

    Code:
    Ext.Viewport.add(HelloWorld.Modella1().show);
    should be:

    Code:
    Ext.Viewport.add(new HelloWorld.Modella1());
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  8. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    10
    Vote Rating
    0
      0  

    Default

    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

  9. #8
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    Is there something in the HelloWorld.Modella1 class that is being created outside the class?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  10. #9
    Sencha User
    Join Date
    Dec 2011
    Posts
    10
    Vote Rating
    0
      0  

    Default

    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();
    }


    });

  11. #10
    Sencha User
    Join Date
    Dec 2011
    Posts
    10
    Vote Rating
    0
      0  

    Thumbs up

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •