1. #1
    Sencha User
    Join Date
    Dec 2011
    Location
    Poitiers, France
    Posts
    20
    Vote Rating
    3
    youss.imzourh is on a distinguished road

      0  

    Default Problem with destroying component

    Problem with destroying component


    Hi all,

    I have a vicious problem with some Panel (with vbox/stretch layout), that I create a first time with some config, and I add it to a Container.
    This Panel have 3 items (2 FormPanel and 1 GridPanel).
    1. I destroy the Panel (or remove it from container with autoDestroy true)
    2. I add a new Panel with the same config as the first time.
    => I have a javascript error (trace below), and all my layout is broken.

    First, I thought it was the static IDs that I gave to some components which causes the bug, but even if I remove all these IDs, I have exactly the same problem.

    I think it's caused by the destroy that is not a real complete destroy. When I list the elements of the Ext.ComponentManager (Ext.ComponentManager.all) just after my destroy call, I still have the Panel and all its descendants.

    Can you please guide me to solve this annoying bug ?

    Thanks in advance.
    Youss

    PHP Code:
    Uncaught TypeErrorCannot read property 'addCls' of null
    Ext
    .define.addCls                                             ext-all-debug.js:44732
    Ext
    .define.configureItem                                      ext-all-debug.js:72814
    Ext
    .define.renderItem                                         ext-all-debug.js:41198
    Ext
    .define.renderItems                                        ext-all-debug.js:41162
    Ext
    .define.renderChildren                                     ext-all-debug.js:41147
    Ext
    .define.invalidate                                         ext-all-debug.js:54175
    Ext
    .define.invalidate                                         ext-all-debug.js:54181
    Ext
    .define.invalidate                                         ext-all-debug.js:54181
    Ext
    .define.flushInvalidates                                   ext-all-debug.js:54016
    Ext
    .define.run                                                ext-all-debug.js:54501
    Ext
    .define.statics.flushLayouts                               ext-all-debug.js:43381
    Ext
    .define.statics.resumeLayouts                              ext-all-debug.js:43388
    Ext
    .resumeLayouts                                             ext-all-debug.js:45386
    Ext
    .define.add                                                ext-all-debug.js:73455
    Ext
    .define.action                                             app/Ayaline/Page.js:37
    Ext
    .define.authentification.Ext.Ajax.request.success          app/Ayaline/Utils.js:17
    Ext
    .apply.callback                                            ext-all-debug.js:6293
    Ext
    .define.onComplete                                         ext-all-debug.js:36779
    Ext
    .define.onStateChange                                      ext-all-debug.js:36740
    (anonymous function)ext-all-debug.js:1765 

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,085
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    It would be very helpful if you could create a small working example so we can take a look.

    Regards,
    Scott.

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,004
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      2  

    Default


    It usually means you're trying to re-use an already destroyed component.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Location
    Poitiers, France
    Posts
    20
    Vote Rating
    3
    youss.imzourh is on a distinguished road

      1  

    Default


    Sorry I found my mistake :

    I'm using my own components that inherits from Panel or FormPanel, etc.
    I didn't define them properly :

    PHP Code:
    Ext.define('Ayaline.page.Exportation', {
        
    extend'Ext.Container',

        
    pageTitle'Exportation de fiches',

        
    layout: {
            
    type'vbox',
            
    align'stretch'
        
    },
        
    defaults: {
            
    anchor'100%'
        
    },
        
    items: [
            
    Ext.create('Ayaline.panel.RecherchesRapides'),
            
    Ext.create('Ayaline.panel.FormulaireRecherche'),
            
    Ext.create('Ayaline.panel.ListeDeResultats')
        ]
    }); 
    The right way that fixed my bug :

    PHP Code:
    Ext.define('Ayaline.page.Exportation', {
        
    extend'Ext.Container',

        
    pageTitle'Exportation de fiches',

        
    initComponent: function () {
            
    Ext.apply(this, {
                
    layout: {
                    
    type'vbox',
                    
    align'stretch'
                
    },
                
    defaults: {
                    
    anchor'100%'
                
    },
                
    items: [
                    
    Ext.create('Ayaline.panel.RecherchesRapides'),
                    
    Ext.create('Ayaline.panel.FormulaireRecherche'),
                    
    Ext.create('Ayaline.panel.ListeDeResultats')
                ]
            });
            
    this.callParent(arguments);
        }
    }); 

  5. #5
    Sencha User
    Join Date
    Aug 2010
    Location
    Providence, RI
    Posts
    3
    Vote Rating
    1
    ahgoodale is on a distinguished road

      1  

    Default


    Was moving the "layout" and "defaults" config objects into initComponent() required to solve the issue? It seems like all you need to do is move the items collection, since it was the child items on the prototype that were being re-used when the component was destroyed.

  6. #6
    Sencha User
    Join Date
    Dec 2011
    Location
    Poitiers, France
    Posts
    20
    Vote Rating
    3
    youss.imzourh is on a distinguished road

      0  

    Default


    Quote Originally Posted by ahgoodale View Post
    Was moving the "layout" and "defaults" config objects into initComponent() required to solve the issue? It seems like all you need to do is move the items collection, since it was the child items on the prototype that were being re-used when the component was destroyed.
    Right!
    Thanks ahgoodale

  7. #7
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    160
    Vote Rating
    4
    Juanito is on a distinguished road

      0  

    Default


    I ran across the same problem when some code was recreating a window with the same ID as what it was previously.

    PHP Code:
    buttons: [{
        
    text'Select File',
        
    handler:  function() {
            new 
    Ext.Window({
                
    title'Browse and Select Sequence File',          
                
    id'fileUploaderWindow',   // Breaks everything
                
    width600,
                
    layout'fit',
                
    itemsfileUploader,
                
    autoShowtrue
            
    });
         },
    }] 

    I have always said, don't ever assign your own ids, now I have one more reason for it.